顯示:
//顯示用法一:show(); 無參數(shù)//效果:立即顯示$("div").show();//顯示用法二:show(毫秒值);(底層是由display控制)//效果:控制寬、高、透明度由小變大$("div").show(2000);//顯示用法三:hide(字符串);// slow慢:600ms normal正常:400ms fast快:200ms//效果:同用法二$("div").hide("slow");$("div").hide("fast");$("div").hide("normal");//顯示用法四:show(毫秒值,回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);//效果:前面同法二,執(zhí)行完動(dòng)畫后執(zhí)行回調(diào)函數(shù)$("div").show(5000,function () { alert("動(dòng)畫執(zhí)行完畢!");});隱藏:
jq對(duì)象.hide();用法同show()有四種,效果分別與之對(duì)應(yīng)的show方法相反
滑入: 同show方法一樣有四種方法且參數(shù)一致,通過控制寬度或者高度來實(shí)現(xiàn)效果,滑入的方向與定位有關(guān),默認(rèn)向下滑入
//方法一:slideDown();//效果:勻速向下滑$("div").slideDown();//方法二:slideDown(毫秒值);//效果:緩動(dòng)向下滑$("div").slideDown(2000);//方法三、四略滑出:
jq對(duì)象.slideUp();同滑入
滑入、滑動(dòng)切換
//slideToggle() 用法同上//效果:如果是滑入就滑出,反之一樣$("div").slideToggle(1000);淡入: 用法同上,通過控制opacity達(dá)到效果
//方法一:slidefadeIn();//效果:透明度勻速增加$("div").fadeIn();//方法二:fadeIn(毫秒值);//效果:透明度緩動(dòng)向下滑$("div").fadeIn(2000);//方法三、四略淡出:
jq對(duì)象.fadeOut();淡入淡出切換:
fadeToggle();效果同滑入滑出切換
$(selector).animate(params,[speed],[easing],[fn]) 參數(shù): params:動(dòng)畫目標(biāo)值,json格式 speed:動(dòng)畫速度 easing:要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供”linear” 和 “swing”. fn:在動(dòng)畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次
$("div").animate({"top":100,"left":100},1000, function () { $("div").animate({"top":50,"left":50},1000, function () { alert("動(dòng)畫執(zhí)行完畢!"); });});$(selector).stop([clearQueue],[jumpToEnd]) 參數(shù)說明: clearQueue:如果設(shè)置成true,則清空隊(duì)列。可以立即結(jié)束動(dòng)畫。 gotoEnd:讓當(dāng)前正在執(zhí)行的動(dòng)畫立即完成,并且重設(shè)show和hide的原始樣式,調(diào)用回調(diào)函數(shù)等。
$("div").stop(true,true);新聞熱點(diǎn)
疑難解答
圖片精選