顯示、隱藏動(dòng)畫

• show([s,[e],[fn]])

• 顯示動(dòng)畫
• 內(nèi)部實(shí)現(xiàn)原理根據(jù)當(dāng)前操作的元素是塊級(jí)還是行內(nèi)決定, 塊級(jí)內(nèi)部調(diào)用display:block;,行內(nèi)內(nèi)部調(diào)用display:inline;

// 編寫jQuery相關(guān)代碼
$("button").eq(0).click(function () {
    // $("div").css("display", "block");
    // 注意: 這里的時(shí)間是毫秒
    $("div").show(1000, function () {
        // 作用: 動(dòng)畫執(zhí)行完畢之后調(diào)用
        alert("顯示動(dòng)畫執(zhí)行完畢");
    });
});

• hide([s,[e],[fn]])

• 隱藏動(dòng)畫

$("button").eq(1).click(function () {
    // $("div").css("display", "none");
    $("div").hide(1000, function () {
        alert("隱藏動(dòng)畫執(zhí)行完畢");
    });
});

• toggle([spe],[eas],[fn])

• 切換動(dòng)畫(顯示變隱藏,隱藏變顯示)

$("button").eq(2).click(function () {
    $("div").toggle(1000, function () {
        alert("切換動(dòng)畫執(zhí)行完畢");
    });
});

• 注意事項(xiàng):
  • show(1000, function () {};) 第一個(gè)參數(shù)單位是毫秒, 1000毫秒等于1秒
  • 默認(rèn)的動(dòng)畫時(shí)長(zhǎng)是400毫秒
  • 除了指定毫秒以外還可以指定三個(gè)預(yù)設(shè)參數(shù) slow、normal、fast
    • slow本質(zhì)是600毫秒
    • normal本質(zhì)是400毫秒
    • fast本質(zhì)是200毫秒
  • 其它兩個(gè)方法同理可證

展開、收起動(dòng)畫

• 參數(shù)、注意事項(xiàng)和顯示隱藏動(dòng)畫一模一樣, 只不過動(dòng)畫效果不一樣而已
• slideDown([s],[e],[fn])

• 展開動(dòng)畫

$("button").eq(0).click(function () {
    $("div").slideDown(1000, function () {
        alert("展開完畢");
    });
});

• slideUp([s,[e],[fn]])

• 收起動(dòng)畫

$("button").eq(1).click(function () {
    $("div").slideUp(1000, function () {
        alert("收起完畢");
    });
});

• slideToggle([s],[e],[fn])

• 切換動(dòng)畫(展開變收起,收起變展開)

$("button").eq(2).click(function () {
    $("div").slideToggle(1000, function () {
        alert("收起完畢");
    });
});

淡入、淡出動(dòng)畫

• 參數(shù)、注意事項(xiàng)和顯示隱藏動(dòng)畫一模一樣, 只不過動(dòng)畫效果不一樣而已
• fadeIn([s],[e],[fn])

• 淡入動(dòng)畫

$("button").eq(0).click(function () {
    $("div").fadeIn(1000, function () {
        alert("淡入完畢");
    });
});

• fadeOut([s],[e],[fn])

• 淡出動(dòng)畫

$("button").eq(1).click(function () {
    $("div").fadeOut(1000, function () {
        alert("淡出完畢");
    });
});

• fadeToggle([s,[e],[fn]])

• 切換動(dòng)畫(顯示變淡出,不顯示變淡入)

$("button").eq(2).click(function () {
    $("div").fadeToggle(1000, function () {
        alert("切換完畢");
    });
});

• fadeTo([[s],o,[e],[fn]])

• 淡入到指定透明度動(dòng)畫
• 可以通過第二個(gè)參數(shù),淡入到指定的透明度(取值范圍0~1)

$("button").eq(3).click(function () {
    $("div").fadeTo(1000, 0.2, function () {
        alert("淡入完畢");
    })
});

自定義動(dòng)畫

• 有時(shí)候jQuery中提供的集中簡(jiǎn)單的固定動(dòng)畫無法滿足我們的需求, 所以jQuery還提供了一個(gè)自定義動(dòng)畫方法來滿足我們復(fù)雜多變的需求

• animate(p,[s],[e],[fn])

/*
第一個(gè)參數(shù): 接收一個(gè)對(duì)象, 可以在對(duì)象中修改屬性
第二個(gè)參數(shù): 指定動(dòng)畫時(shí)長(zhǎng)
第三個(gè)參數(shù): 指定動(dòng)畫節(jié)奏, 默認(rèn)就是swing
第四個(gè)參數(shù): 動(dòng)畫執(zhí)行完畢之后的回調(diào)函數(shù)
*/
$(".two").animate({
    marginLeft: 500
}, 5000, "linear", function () {
    // alert("自定義動(dòng)畫執(zhí)行完畢");
});

• 每次開始運(yùn)動(dòng)都必須是初始位置或者初始狀態(tài),如果想在上一次位置或者狀態(tài)下再次進(jìn)行動(dòng)畫可以使用累加動(dòng)畫

$("button").eq(1).click(function () {
    $(".one").animate({
        width: "+=100"
    }, 1000, function () {
        alert("自定義動(dòng)畫執(zhí)行完畢");
    });
});

• 同時(shí)操作多個(gè)屬性,自定義動(dòng)畫會(huì)執(zhí)行同步動(dòng)畫,多個(gè)被操作的屬性一起執(zhí)行動(dòng)畫

$(".one").animate({
    width: 500,
    height: 500
}, 1000, function () {
    alert("自定義動(dòng)畫執(zhí)行完畢");
});

動(dòng)畫隊(duì)列

• 多個(gè)動(dòng)畫方法鏈?zhǔn)骄幊?會(huì)等到前面的動(dòng)畫執(zhí)行完畢再依次執(zhí)行后續(xù)動(dòng)畫

$("div").slideDown(1000).slideUp(1000).show(1000);

$(".one").slideDown(1000,function () {
    $(".one").slideUp(1000, function () {
        $(".one").show(1000);
    });
});

• 但是如果后面緊跟一個(gè)非動(dòng)畫方法則會(huì)被立即執(zhí)行

// 立刻變?yōu)辄S色,然后再執(zhí)行動(dòng)畫
$(".one").slideDown(1000).slideUp(1000).show(1000).css("background", "yellow");

• 如果想顏色再動(dòng)畫執(zhí)行完畢之后設(shè)置, 1.使用回調(diào) 2.使用動(dòng)畫隊(duì)列

$(".one").slideDown(1000,function () {
    $(".one").slideUp(1000, function () {
        $(".one").show(1000, function () {
            $(".one").css("background", "yellow")
        });
    });
});

$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function () {
    $(".one").css("background", "yellow")
});

• 注意點(diǎn):
  • 動(dòng)畫隊(duì)列方法queue()后面不能繼續(xù)直接添加queue()
  • 如果想繼續(xù)添加必須在上一個(gè)queue()方法中next()方法

$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function (next) {
    $(".one").css("background", "yellow");
    next(); // 關(guān)鍵點(diǎn)
}).queue(function () {
    $(".one").css("width", "500px")
});

動(dòng)畫相關(guān)方法

• delay(d,[q])
  • 設(shè)置動(dòng)畫延遲時(shí)長(zhǎng)

$(".one").animate({
    width: 500
    // height: 500
}, 1000).delay(2000).animate({
    height: 500
}, 1000);

• • stop([c],[j])
  • 停止指定元素上正在執(zhí)行的動(dòng)畫

// 立即停止當(dāng)前動(dòng)畫, 繼續(xù)執(zhí)行后續(xù)的動(dòng)畫
// $("div").stop();
// $("div").stop(false);
// $("div").stop(false, false);

// 立即停止當(dāng)前和后續(xù)所有的動(dòng)畫
// $("div").stop(true);
// $("div").stop(true, false);

// 立即完成當(dāng)前的, 繼續(xù)執(zhí)行后續(xù)動(dòng)畫
// $("div").stop(false, true);

// 立即完成當(dāng)前的, 并且停止后續(xù)所有的
$("div").stop(true, true);