網(wǎng)站設(shè)計中經(jīng)常會用到的jquery 動畫效果責(zé)任編輯 :李飛    文章來源 :星翼創(chuàng)想(16qt59sf.cn)    發(fā)布時間 :2014-08-08    閱讀次數(shù):4361

 網(wǎng)站設(shè)計中經(jīng)常會用到的jquery 動畫效果，總結(jié)一下，用起來的時候會方便很多，現(xiàn)在的網(wǎng)頁設(shè)計中驚顫工會用到j(luò)Query，所以多總結(jié)才能有進(jìn)步。

隱藏和顯示

瞬間隱藏和顯示

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

漸顯、隱

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

在兩種狀態(tài)間切換

$("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);   }); });

狀態(tài)切換

$(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 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。
向下滑動

$(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()接受一個字典類型的參數(shù)，該參數(shù)決定所選元素動畫結(jié)束時所處的狀態(tài)
動畫的值可以是 "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 參數(shù)規(guī)定是否應(yīng)該清除動畫隊列。默認(rèn)是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執(zhí)行。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動畫。默認(rèn)是 false。

當(dāng)然jquery語句也可以級聯(lián)調(diào)用

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

文章轉(zhuǎn)載請保留網(wǎng)址：http://16qt59sf.cn/news/solutions/1000.html