網站設計中經常會用到的jquery 動畫效果，總結一下，用起來的時候會方便很多，現在的網頁設計中驚顫工會用到jQuery，所以多總結才能有進步。

隱藏和顯示

瞬間隱藏和顯示

$("#hide").click(function(){   $("p").hide(); });  $("#show").click(function(){   $("p").show(); });

漸顯、隱

$("button").click(function(){   $("p").hide(1000); });

在兩種狀態間切換

$("button").click(function(){   $("p").toggle(); });

淡入淡出

淡入

$(document).ready(function(){   $("button").click(function(){     $("#div1").fadeIn();     $("#div2").fadeIn("slow");     $("#div3").fadeIn(3000);   }); });

淡出

$(document).ready(function(){   $("button").click(function(){     $("#div1").fadeOut();     $("#div2").fadeOut("slow");     $("#div3").fadeOut(3000);   }); });

狀態切換

$(document).ready(function(){   $("button").click(function(){     $("#div1").fadeToggle();     $("#div2").fadeToggle("slow");     $("#div3").fadeToggle(3000);   }); });

淡出的不同速度、程度

$(document).ready(function(){   $("button").click(function(){     $("#div1").fadeTo("slow",0.15);     $("#div2").fadeTo("slow",0.4);     $("#div3").fadeTo("slow",0.7);   }); });

滑動

簡明語法

$(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒?？蛇x的 callback 參數是滑動完成后所執行的函數名稱。
向下滑動

$(document).ready(function(){   $(".flip").click(function(){     $(".panel").slideDown("slow");   }); });

向上滑動

$(document).ready(function(){   $(".flip").click(function(){     $(".panel").slideUp("slow");   }); });

折疊打開效果

$(document).ready(function(){ $(".flip").click(function(){     $(".panel").slideToggle("slow");   }); });

自定義動畫

jQuery animate()

$("button").click(function(){   $("div").animate({     left:’250px’,     opacity:’0.5’,     height:’150px’,     width:’150px’   }); });

animate()接受一個字典類型的參數，該參數決定所選元素動畫結束時所處的狀態
動畫的值可以是 "show"、"hide" 或 "toggle"：

$("button").click(function(){   $("div").animate({     height:’toggle’   }); });

并且所有的動畫按照動畫序列來做

$("button").click(function(){   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"); });

停止動畫

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

$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。

當然jquery語句也可以級聯調用

$("#p1").css("color","red").slideUp(2000).slideDown(2000);