jquery動畫

2024-04-27 15:08:45

字體：大中小

來源：轉載

供稿：網友

顯示與隱藏

顯示：

//顯示用法一：show(); 無參數//效果：立即顯示$("div").show();//顯示用法二：show(毫秒值);（底層是由display控制）//效果：控制寬、高、透明度由小變大$("div").show(2000);//顯示用法三：hide(字符串);// slow慢：600ms normal正常:400ms fast快：200ms//效果：同用法二$("div").hide("slow");$("div").hide("fast");$("div").hide("normal");//顯示用法四：show(毫秒值，回調函數[顯示完畢執行什么]);//效果：前面同法二，執行完動畫后執行回調函數$("div").show(5000,function () { alert("動畫執行完畢！");});

隱藏：

jq對象.hide();

用法同show()有四種，效果分別與之對應的show方法相反

滑入、滑出、滑動切換

滑入：同show方法一樣有四種方法且參數一致，通過控制寬度或者高度來實現效果，滑入的方向與定位有關，默認向下滑入

//方法一：slideDown();//效果：勻速向下滑$("div").slideDown();//方法二：slideDown(毫秒值);//效果：緩動向下滑$("div").slideDown(2000);//方法三、四略

滑出：

jq對象.slideUp();

同滑入

滑入、滑動切換

//slideToggle() 用法同上//效果：如果是滑入就滑出，反之一樣$("div").slideToggle(1000);

淡入、淡出、淡入淡出切換、改變透明度

淡入：用法同上，通過控制opacity達到效果

//方法一：slidefadeIn();//效果：透明度勻速增加$("div").fadeIn();//方法二：fadeIn(毫秒值);//效果：透明度緩動向下滑$("div").fadeIn(2000);//方法三、四略

淡出：

jq對象.fadeOut();

淡入淡出切換：

fadeToggle();

效果同滑入滑出切換

自定義動畫

$(selector).animate(params,[speed],[easing],[fn]) 參數: params:動畫目標值，json格式 speed:動畫速度 easing:要使用的擦除效果的名稱(需要插件支持).默認jQuery提供”linear” 和 “swing”. fn:在動畫完成時執行的函數，每個元素執行一次

$("div").animate({"top":100,"left":100},1000, function () { $("div").animate({"top":50,"left":50},1000, function () { alert("動畫執行完畢！"); });});