• 隱藏/顯示
  jQuery hide()和show()：

$("#hide").click(function(){
    $("p").hide();
});
$("#show").click(function(){
    $("p").show();
});
// 也可以使用帶參數的 $("p").show(2000);

jQuery toggle()：

//用來切換hide()和show()方法，顯示被隱藏的元素或隱藏已顯示的元素。
$("button").click(function(){
    $("p").toggle();
});
// 同樣可以使用帶參數的 $("p").toggle(2000);

• 淡入淡出
  fadeIn()、fadeOut()、fadeToggle()、fadeTo()

$("button").click(function(){
    // 淡入效果，可以帶參數，淡入的時間（毫秒）
    $("div1").fadeIn();
    $("div2").dadeIn(1000);
    // 淡出效果，帶參數為淡出時間
    $("div1").fadeOut();
    $("div2").fadeOut(2000);
    // fadeToggle()用于fadeIn()和fadeOut()之間切換
    $("div1").fadeToggle();
    $("div2").fadeToggle("slow");
    // fadeTo()用于漸變為指定的不透明度（0-1之間）
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo(2000,0.4);
});

• 滑動
  jQuery slideDown()、slideUp()、slideToggle()

$('button').click(function(){
    // slideDown()用于向下滑動元素
    $('p#in').slideDown('slow');
    //  slideUp()用于向上滑動元素
    $('p#out').slideUp(3000);
    // slideToggle()用于slideDown()和slideUp()之間切換
    $("p#toggle").slideToggle();
});

• 動畫
  $(selector).animate({params},speed,callback);
  params為比傳，speed和callback可選

$('button').click(function(){
    // 將一個<div>移動到左邊
    $('div').animate({left:'100px'});
    // 也可以同時操作多個屬性
    $('div').animate({left:'200px', opacity:'0.4', height:'100px', width:'50px'});
    // 或者相對屬性值
    $('div').animate({left:'200px', height:'+=100px', width:'+=50px'});
    // 使用動畫集合
    var div=$('div');
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
});

• stop()
  jQuery stop()方法用于停止正在之行的動畫或效果。
  $(selector).stop(stopAll,goToEnd);
  stopAll為可選，是否清楚隊列，默認為false，僅停止動畫；
  goToEnd為可選，是否立即完成當前動畫，默認為false；

$(document).ready(function(){
    $("#flip").click(function(){
        $("p").slideDown(4000);
    });
    $("#stop").click(function(){
        $("p").stop();
    });
});

• Callback
  在所有效果之行結束后都可以使用callback來之行其他動作，比如：

$("button").click(function(){
    $("p").hide(1000,function(){
        alert("<p>隱藏了");
    });
});

• Chaining
  跟其他語言一樣，jQuery也可以對同一個元素之行多條命令，如：

//把<p>字體顏色變紅，向上移動后再向下移動
$("p").css("color","red").slideUp(1000).slideDown(1000);