jQueryを使ったアニメーションの実装方法についてお話します（詳細コード解説）

jQuery を使用してアニメーションを実装するにはどうすればよいですか?次の記事では、定義済みアニメーションまたはカスタム アニメーションを実装するための jQuery メソッドをいくつか紹介します。

定義済みアニメーション

表示と非表示

show( ) メソッドと hide() メソッドは、jQuery の最も基本的なアニメーション メソッドです。具体的な構文は次のとおりです。

$element.show([speed],[easing],[fn]);
$element.hide([speed],[easing],[fn]);

• speed: 3 つの所定の速度 (「遅い」、「標準」、または「速い」) のいずれかの文字列、またはアニメーションの継続時間を表すミリ秒の値。
• イージング: スイッチング効果を指定するために使用されます。デフォルトは「swing」、使用可能なパラメータは「linear」です。
• fn: アニメーションの完了時に要素ごとに 1 回実行される関数。

/* 
显示与隐藏
1.无动画版本
  * show()- 显示
  * hide() - 隐藏
2.有动画版本 - 同时改变宽度和高度
 * show (speed,callback)
  * speed - 动画执行的时长,单位为毫秒
  * callback - 动画执行完毕后的回调函数
 * hide (speed, callback)
  * speed - 动画执行的时长,单位为毫秒
  * callback - 动画执行完毕后的回调函数
*/

$('#box').hide(2000,function(){
$('#box').show(2000);          
});

スライド アニメーション

##slidelUp() メソッドと slideDown() メソッド高さの値を変更してアニメーション効果を実現します。具体的な構文は次のとおりです。

$element.slideUp([speed],[easing],[fn]);
$element.slideDown([speed],[easing],[fn]);

speed: 3 つの所定の速度 (「遅い」、「標準」、または「速い」) のいずれかの文字列、またはアニメーションの継続時間を表すミリ秒の値。
イージング: スイッチング効果を指定するために使用されます。デフォルトは「swing」、使用可能なパラメータは「linear」です。
fn: アニメーションの完了時に要素ごとに 1 回実行される関数。

/* 
滑动式动画 - slideup()和slideDown()
* 注意 - 没有无动画版本(底层代码预定义动画执行的时长)
* 效果 - 改变指定元素的高度
*/
$('#box').slideUp(3000);
$('#box').slideDown(3000);

ログイン後にコピー

フェード エフェクト

メソッドと fadeOut() メソッド透明度を変更してアニメーション効果を実現します。具体的な構文は次のとおりです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$element.fadeln([speed],[easing],[fn]); $element.fadeOut([speed],[easing],[fn]);</pre><div class="contentsignin">ログイン後にコピー</div></div>

• イージング: スイッチング効果を指定するために使用されます。デフォルトは「swing」、使用可能なパラメータは「linear」です。
• fn: アニメーションの完了時に要素ごとに 1 回実行される関数。

• // 改变元素的透明度
  $('#box').fadeOut(3000);
  $('#box').fadeIn(3000);

  ログイン後にコピー

アニメーション切り替え効果3 つの事前定義されたアニメーション効果を提供することに加えて、jQuery は 3 セットのアニメーション切り替え効果も提供します。

toggle
• ([speed], [easing] [, fn] ) メソッド: 要素が表示されている場合は非表示に切り替え、要素が非表示の場合は表示を切り替えます。
slideToggle
• ([speed], [easing] [, fn]) メソッド: 高さを変更することで、一致するすべての要素の表示を切り替え、オプションでコールバックをトリガーします。
fadeToggle
• ([speed], [easing] [, fn]) メソッド: 不透明度の変更を通じて、一致するすべての要素のフェードイン効果とフェードアウト効果を切り替えます。アニメーションの完了後に使用されます。オプションでコールバック関数をトリガーします。

  $('#btn').click(function(){
  // $('#box').toggle(3000);
  // $('#box').slideToggle(3000);
  $('#box').fadeToggle(3000)
  })

  ログイン後にコピー

カスタム アニメーション

animate() メソッド jQuery は、カスタム アニメーション効果を完成させる

メソッドを提供します。このメソッドには 2 つの用途があります: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$element.animate(properties,duration,easing,complete)</pre><div class="contentsignin">ログイン後にコピー</div></div>

• duration : アニメーションの実行時間を決定する文字列または数値。
• easing : トランジションに使用するイージング関数を示す文字列。
• corplete: アニメーションの完了時に実行されるコールバック関数。

• /* 
  animate()方法–自定义动画方法
  1.animate(properties,duration，callback)
   * properties - 表示cSS的样式属性
    * 设置动画执行结束的样式属性值
   * duration - 表示动画执行的时长，单位为亳秒
   * callback - 表示动画执行完毕后的回调函数
  2.animate(properties,options)
   * properties - 表示cSS的样式属性
    * 设置动画执行结束的样式属性值
   * options - 表示设置动画的相关参数
    * speed - 表示动画执行的时长,单位为毫秒
    * comalete - 表示动画执行完毕后的回调函数
    * queue - 布尔值,设置是否添加到动画队列中
  */
  /* $('#box').animate({
   width : 100,
   height : 100
  },3000);
  */
  $('#box').animate({
   width : 100,
   height : 100,
   left : 100
  },{
   speed : 3000
  });

  ログイン後にコピー

animate() メソッドによって実現されますが、次の CSS スタイル属性はサポートされていません:

backgroundColor
borderBottonColor.
borderLeftColor
borderRightColor
borderTopColor
Color
• ##outlineColor
##同時実行 キュー効果を使用した同時実行効果

: 複数のアニメーション効果を同時に実行することを指します。

$("#panel").click(function(){
 $(this).animate({
   left: "500px",
   height:"200px"
 }, 3000);
};

$("#panel").click(function(){
 $(this).animate({ left: "500px"},3000)
  .animate({ height: "200px" }, 3000);
});

: 現在のアニメーション効果を同時実行するかキューに入れるかを制御するために使用します:

/* 
queue - 用于控制当前的动画效果是并发还是排队效果
* 参数
 * false - 并发
 * true - 排队
*/
$('#box').animate({
 left : 300
},{
 duration : 3000
}).animate({
 top : 300
},{
 duration : 3000,
 queue : true
});

アニメーション効果を停止

jQuery は、指定された要素で実行中のすべてのアニメーションを停止する stop() メソッドを提供します。具体的な構文は次のとおりです:

$element.animate([clearQueue][, gotoEnd]);

clearQueue: true に設定すると、次に、キューをクリアします。アニメーションはすぐに終了できます。 gotoEnd: 現在実行中のアニメーションをすぐに完了させ、表示と非表示の元のスタイルをリセットし、コールバック関数などを呼び出します。

$('#stort').click(function(){
 $('#box').animate({
 left : 600
},3000).animate({
 top : 200
 },3000)
});
$('#stop').click(function(){
/* 
 * stop()方法没有接收任何参数时 - 立即停止执行动画
 * stop(queue)方法的第一个参数
  * false - 表示停止当前动画,但队列中的动画继续执行
  * true - 表示停止当前动画,并且清空动画队列
 * stop (queue,gotoEnd)方法的第二个参数
  * false - 不会做任何处理
  * true - 表示停止当前动画，并且将指定元素设置为动画执行完毕后的样式
*/
 $('#box').stop(true,true);
});

アニメーションの実行を遅らせます。アニメーション

jQuery は、キュー内の後続のアイテムの実行を遅らせる遅延を設定するための lay() メソッドを提供します。具体的な構文は次のとおりです:

$element.delay(duration, queueName]);

duration: 遅延時間、単位はミリ秒です。 queueName: キュー名詞、デフォルトは Ex、アニメーション キューです。

$('#box').animate({
 left : 600
},3000).delay(1000).animate({
 top : 200
},3000);

推奨される関連ビデオ チュートリアル:

以上がjQueryを使ったアニメーションの実装方法についてお話します（詳細コード解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。