【46】JQ-アニメーション

JavaScriptでアニメーションを実現する原理は非常に簡単です.DOM要素のCSSスタイルを一定の時間間隔(例えば、0.1秒)で修正するたびに(例えば、アスペクトを10%ずつ増やす)、アニメーションのように見えます.
しかし、JavaScriptで手動でアニメーション効果を実現するには、非常に複雑なコードを書く必要があります.アニメーション効果を関数でカプセル化して多重化しやすいようにするには、より多くのことを考えます.
jQueryを使用してアニメーションを実装すると、コードはもう簡略化できません.コードは1行しか必要ありません.
まず、jQueryに組み込まれているいくつかのアニメーションスタイルを見てみましょう.
show/hide
show()とhide()をパラメータなしで直接呼び出すと、DOM要素が表示され非表示になりますが、時間パラメータを渡すだけでアニメーションになります.

var div = $('#test-show-hide');
div.hide(3000);  //  3       

時間はミリ秒単位ですが、'slow'、'fast'の文字列でも構いません.

var div = $('#test-show-hide');
div.show('slow');  //  0.6       

toggle()メソッドは,現在の状態に応じてshow()かhide()かを決定する.
slideUp/slideDown
ショー()とhide()は左上から徐々に展開または収縮し、slideUp()またはslideDown()は垂直方向に徐々に展開または収縮していることがわかります.
slideUp()は可視のDOM要素を収め、カーテンを引くように効果的です.slideDown()は反対ですが、slideToggle()は要素が可視かどうかによって次の動作を決定します.

var div = $('#test-slide');
div.slideUp(3000);  //  3         

fadeIn/fadeOut
fadeIn()とfadeOut()のアニメーション効果は、DOM要素のopacityプロパティを絶えず設定することによって実現され、fadeToggle()は要素が見えるかどうかによって次のアクションを決定します.

var div = $('#test-div');
div.fadeOut('slow');  //  0.6    

カスタムアニメーション
上記のアニメーション効果がまだあなたの要求を満たすことができない場合は、最後の大技:animate()を祭って、それは任意のアニメーション効果を実現することができて、私たちが入力するパラメータはDOM要素の最終的なCSS状態と時間で、jQueryは時間帯内にCSSを絶えず調整して私たちが設定した値に達するまで:

var div = $('#test-animate');
div.animate({
    opacity: 0.25,
    widht: '256px',
    height: '256px'
}, 3000);  //  3   CSS      

animate()は、アニメーションが終了すると呼び出される関数をさらに入力することもできます.

var div = $('#test-animate');
div.animate({
    opacity: 0.25,
    width: '256px',
    height: '256px'
}, 3000, function () {
    console.log('     ');
    //         :
    $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

実際には、このコールバック関数パラメータは基本アニメーションにも適用されます.アニメーション()があれば、さまざまなカスタムアニメーション効果を実現できます.
シリアルアニメーション
jQueryのアニメーション効果はシリアルでも実行でき、delay()メソッドでは一時停止も実現できます.これにより、より複雑なアニメーション効果を実現できますが、コードはかなり簡単です.

var div = $('#test-animate');
//      ： slideDown -    -    -    -   
div.slideDown(2000)
    .delay(1000)
    .animate({
        width: '256px',
        height: '256px', 
    }, 2000)
    .delay(1000)
    .animate({
        width: '128px',
        height: '128px'
    }, 2000);

アニメーションを実行するには時間がかかるため、jQueryは後続の操作を実行するために新しいPromiseオブジェクトを常に返さなければなりません.アニメーションを簡単に関数にカプセル化するには十分ではありません.
どうしてあるアニメーションは効果がありません
slideUp()のようなアニメーションには効果がない場合があります.これはjQueryアニメーションの原理が、heightが100 pxから徐々に0になるようにCSSの値を徐々に変化させるためである.しかし、blockではないDOM要素の多くは、heightを設定しても機能しないため、アニメーションも効果がありません.また、jQueryでもbackground-colorのアニメーション効果は実現されず、animate()でbackground-colorを設定しても効果はありません.この場合、CSS 3のtransitionを用いて動画効果を実現することができる.
練習する
削除操作を実行すると、remove()を直接呼び出すよりもアニメーションを表示します.表の行を削除するときに、フェードアウトされたアニメーション効果を追加してください.

funcition deleteFirstTR() {
    var tr = $('#test-table>tbody>tr:visible').first();
    tr.fadeOut('slow', function () {
        $(this).remove();
    });
}
deleteFirstTR();

//  fadeOut   ，remove   ，       ，     remove()