jquery動畫

顯示與隱藏

顯示：

//顯示用法一：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("動畫執行完畢！");
    });
});

---

動畫停止

$(selector).stop([clearQueue],[jumpToEnd])
參數說明:
clearQueue:如果設置成true，則清空隊列。可以立即結束動畫。
gotoEnd:讓當前正在執行的動畫立即完成，並且重設show和hide的原始樣式，調用回調函數等。

$("div").stop(true,true);