jQueryの定番アニメーション

show()メソッドとhide()メソッドはjQueryの基本的なアニメーションメソッドであり、hide()メソッドはcss()メソッドをdisplayプロパティをnoneに設定することに等しい.どのように要素を動かすか、showとhideにslow、fast、normal、または具体的な時間を加えることができます.

1 $("element").show("slow");//      ~

2 $("element").hide(1000);

$("#panel h5.head").toggle(function(){

    $(this).next().hide(600);

},function(){

    $(this).next().show(600);

});

show()メソッドとは異なり、fadeIn()メソッドとfadeOut()メソッドは要素の透明度のみを変更します.slideUp()メソッドとslideDown()メソッドでは、要素の高さのみが変更されます.要素のプロパティ値がnoneに設定されている場合、slideDown()メソッドが呼び出されると、この要素は上から下まで表示されます.
jQueryのアニメーション効果では、3つの速度パラメータ、すなわち「slow」「normal」「fast」を指定できます(時間長はそれぞれ0.6,0.4,0.2秒).
または特定の数値()単位のデフォルトはミリ秒です.
カスタムアニメーションメソッドanimate()

animate(params,speed,callback);

callbackは、アニメーションが完了したときに実行される関数で、オプションです.
一般的なアニメーションをいくつか紹介します.
1累加、累減アニメーション

1 $(function(){

2     $("#panel").click(function(){

3         $(this).animate({left:"+=500px"},300);

4     });

5 });

2マルチアニメーション2.1複数のアニメーションを同時に実行

1 $(function(){

2     $("#myImg").click(function(){

3         $(this).animate({left:"500px",height:"200px"},3000)

4     });

5 });

2.2複数のアニメーションを順番に実行する

1 $(this).animate({left:"500px"},3000)

2         .animate({height:"200px"},3000);

3総合アニメーション

1 $(function(){

2     $("#panel").css("opacity","0.5");

3     $("#panel").click(function(){

4         $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)

5             .animate({top:"200px",width:"200px"},3000)

6             .fadeOut("slow");

7     });

8 });

4コールバック関数上記の例では、最後のステップで要素のcssスタイルを非表示要素ではなく切り替えたい場合は、直接css()メソッドを追加できますか?答えはできませんが、css()メソッドはアニメーションキューには追加されず、すぐに実行されます.callbackコールバック関数はjQueryのすべてのアニメーション効果メソッドに適用され、css()メソッドを最後のアニメーションのコールバック関数に書けばよい.

 

 1  $(function(){

 2         $("#panel").css("opacity", "0.5");//      

 3         $("#panel").click(function(){

 4               $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)

 5                      .animate({top: "200px" , width :"200px"}, 3000 ,function(){

 6                          $(this).css("border","5px solid blue");

 7                      });

 8                      

 9         });

10     });

5要素のアニメーションを停止どこかでアニメーションを停止するにはstop()メソッド、構文構造:stop([clearQueue],[gotoEnd]);どちらのパラメータもオプションのパラメータで、ブール値です.最初のパラメータは、未実行のアニメーションキューを空にするかどうか、2番目のパラメータは、実行中のアニメーションを直接最後の状態にジャンプするかどうかを表します.最初のパラメータ(clearQueue)をtrueに設定すると、現在の要素がまだ実行されていないアニメーションキューが空になり、コンビネーションアニメーションに遭遇したときの救急術になります.stop(true,true)は、現在のアニメーションを停止し、アニメーションキューが実行されていない最後の状態に直接到達することを示す.stop(false,true)は、現在のアニメーションを最後の状態に直接到達させることができます.なお、jQueryは、実行中のアニメーションの最終状態のみを設定することができ、未実行のアニメーションキューの最終状態に直接到達する方法は提供されない.
6要素がアニメーション状態かどうかを判断する

1 if(!$(element).is(":animated")){

2     //             

3 }

7遅延アニメーション

1 $(this).animate({left:"400px",height:"2000px",opacity:"1"},3000)

2         .delay(1000)

3         .animate({top:"200px",width:"200px"},3000)

4         delay(2000)

5         .fadeOut("slow");

8その他のアニメーション方法
8.1 toggle(speed,[callback])

1 $("#panel h5.head").toggle(function(){

2     $(this).next().hide();

3 },function(){

4     $(this).next().show();

5 });

8.2 slideToggle()高さを変更することで、一致する要素の可視性を切り替えます.
8.3 fadeTo()メソッドでは、要素の不透明度を指定した値に漸近的に調整できます.
8.4 fadeToggle()メソッドは、不透明度の変化によって要素の可視性を切り替えます.
简単なことをするのは简単ではありません.これらの简単に见えるアニメーションをよく运用すると、きっと変幻の奇迹があります.