網(wǎng)站設(shè)計(jì)中經(jīng)常會(huì)用到的jquery 動(dòng)畫(huà)效果責(zé)任編輯 :李飛    文章來(lái)源 :星翼創(chuàng)想(www.wedoyun.com)    發(fā)布時(shí)間 :2014-08-08    閱讀次數(shù):4553

 網(wǎng)站設(shè)計(jì)中經(jīng)常會(huì)用到的jquery 動(dòng)畫(huà)效果，總結(jié)一下，用起來(lái)的時(shí)候會(huì)方便很多，現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)中驚顫工會(huì)用到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);   }); });

滑動(dòng)

簡(jiǎn)明語(yǔ)法

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

可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱。
向下滑動(dòng)

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

向上滑動(dòng)

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

折疊打開(kāi)效果

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

自定義動(dòng)畫(huà)

jQuery animate()

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

animate()接受一個(gè)字典類型的參數(shù)，該參數(shù)決定所選元素動(dòng)畫(huà)結(jié)束時(shí)所處的狀態(tài)
動(dòng)畫(huà)的值可以是 "show"、"hide" 或 "toggle"：

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

并且所有的動(dòng)畫(huà)按照動(dòng)畫(huà)序列來(lái)做

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

停止動(dòng)畫(huà)

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

$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動(dòng)畫(huà)隊(duì)列。默認(rèn)是 false，即僅停止活動(dòng)的動(dòng)畫(huà)，允許任何排入隊(duì)列的動(dòng)畫(huà)向后執(zhí)行。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫(huà)。默認(rèn)是 false。

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

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

文章轉(zhuǎn)載請(qǐng)保留網(wǎng)址：http://www.wedoyun.com/news/solutions/1000.html