ゼロから遊ぶjQuery-アニメーション効果

アニメーションを表示、非表示にする

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

アニメーション

を表示

内部実装原理は、現在の動作の要素がブロックレベルであるか行内であるかによって決定され、ブロックレベル内部はdisplay:blockを呼び出す.行内内部呼び出しdisplay:inline;

//   jQuery    
$("button").eq(0).click(function () {
    // $("div").css("display", "block");
    //   :         
    $("div").show(1000, function () {
        //   :           
        alert("        ");
    });
});

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

非表示アニメーション

$("button").eq(1).click(function () {
    // $("div").css("display", "none");
    $("div").hide(1000, function () {
        alert("        ");
    });
});

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

アニメーション(表示が非表示、非表示)

を切り替えます.

$("button").eq(2).click(function () {
    $("div").toggle(1000, function () {
        alert("        ");
    });
});

注意事項:

show(1000, function () {};) 最初のパラメータ単位はミリ秒で、1000ミリ秒は1秒

に等しい.

の既定のアニメーション時間は400ミリ秒

です.

ミリ秒の指定に加えて、3つのプリセットパラメータslow、normal、fastを指定できます.

slow本質は600ミリ秒

normalの本質は400ミリ秒

である.

fast本質は200ミリ秒

他の2つの方法は、

を証明することができる.

アニメーションを展開、終了

パラメータ、注意事項は非表示のアニメーションとそっくりですが、アニメーションの効果は違います

slideDown([s],[e],[fn])

アニメーション

を展開

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

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

アニメーション

を閉じる

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

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

アニメーション(展開を閉じる、閉じる、展開を変える)

を切り替えます.

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

フェードイン、フェードアウトアニメーション

パラメータ、注意事項は非表示のアニメーションとそっくりですが、アニメーションの効果は違います

fadeIn([s],[e],[fn])

フェードインアニメーション

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

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

フェードアウトアニメーション

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

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

アニメーションの切り替え(表示がフェードアウト、非表示がフェードイン)

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

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

指定透明度アニメーション

にフェードイン

は、2番目のパラメータにより、指定する透明度(値範囲0~1)

にフェードインすることができる.

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

カスタムアニメーション

jQueryで提供されている集中的で簡単な固定アニメーションは、私たちのニーズを満たすことができない場合があります.そのため、jQueryは、複雑で変化の激しいニーズを満たすためのカスタムアニメーション方法

を提供しています.

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

/*
     :       ,           
     :       
     :       ,     swing
     :              
*/
$(".two").animate({
    marginLeft: 500
}, 5000, "linear", function () {
    // alert("         ");
});

動きを開始するたびに初期位置または初期状態である必要があり、前回の位置または状態で再びアニメーションを行うには累積アニメーション

を使用することができる.

$("button").eq(1).click(function () {
    $(".one").animate({
        width: "+=100"
    }, 1000, function () {
        alert("         ");
    });
});

複数の属性を同時に操作すると、カスタムアニメーションは同期アニメーションを実行し、複数の操作された属性は共にアニメーション

を実行する.

$(".one").animate({
    width: 500,
    height: 500
}, 1000, function () {
    alert("         ");
});

アニメーションキュー

複数のアニメーションメソッドチェーンプログラミングは、前のアニメーションの実行が完了するまで順次後続のアニメーション

を実行する.

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

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

ただし、アニメーション以外の方法が続く場合は、

が直ちに実行される.

//       ,       
$(".one").slideDown(1000).slideUp(1000).show(1000).css("background", "yellow");

カラー再アニメーションを実行した後に設定したい場合は、1.コールバック2を使用する.アニメーションキュー

の使用

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

注意点:

アニメーションキューメソッドqueue()の後に直接queue()を追加することはできません

追加を続行するには、前のqueue()メソッドでnext()メソッド

を使用する必要があります.

$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function (next) {
    $(".one").css("background", "yellow");
    next(); //    
}).queue(function () {
    $(".one").css("width", "500px")
});

アニメーション関連メソッド

delay(d,[q])

アニメーション遅延時間

を設定する.

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

stop([c],[j])

指定要素で実行中のアニメーションを停止する

//         ,          
// $("div").stop();
// $("div").stop(false);
// $("div").stop(false, false);

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

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

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