ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryを使ったアニメーションの実装方法についてお話します(詳細コード解説)
jQuery を使用してアニメーションを実装するにはどうすればよいですか?次の記事では、定義済みアニメーションまたはカスタム アニメーションを実装するための jQuery メソッドをいくつか紹介します。
表示と非表示
show( )
メソッドと hide()
メソッドは、jQuery の最も基本的なアニメーション メソッドです。具体的な構文は次のとおりです。
$element.show([speed],[easing],[fn]); $element.hide([speed],[easing],[fn]);
/* 显示与隐藏 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]);
/* 滑动式动画 - slideup()和slideDown() * 注意 - 没有无动画版本(底层代码预定义动画执行的时长) * 效果 - 改变指定元素的高度 */ $('#box').slideUp(3000); $('#box').slideDown(3000);
フェード エフェクト
##fadeln() メソッドと fadeOut()
メソッド透明度を変更してアニメーション効果を実現します。具体的な構文は次のとおりです。 <pre class="brush:js;toolbar:false;">$element.fadeln([speed],[easing],[fn]);
$element.fadeOut([speed],[easing],[fn]);</pre>
// 改变元素的透明度 $('#box').fadeOut(3000); $('#box').fadeIn(3000);
アニメーション切り替え効果3 つの事前定義されたアニメーション効果を提供することに加えて、jQuery は 3 セットのアニメーション切り替え効果も提供します。
$('#btn').click(function(){ // $('#box').toggle(3000); // $('#box').slideToggle(3000); $('#box').fadeToggle(3000) })
カスタム アニメーション
animate() メソッド jQuery は、カスタム アニメーション効果を完成させる
anirmate() メソッドを提供します。このメソッドには 2 つの用途があります: <pre class="brush:js;toolbar:false;">$element.animate(properties,duration,easing,complete)</pre>
/* 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 スタイル属性はサポートされていません:
##outlineColor
: 複数のアニメーション効果を同時に実行することを指します。 $("#panel").click(function(){
$(this).animate({
left: "500px",
height:"200px"
}, 3000);
};
キュー効果: 複数のアニメーションを順番に実行することを指します。
$("#panel").click(function(){ $(this).animate({ left: "500px"},3000) .animate({ height: "200px" }, 3000); });queue
: 現在のアニメーション効果を同時実行するかキューに入れるかを制御するために使用します:
/* 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 ビデオ チュートリアル以上がjQueryを使ったアニメーションの実装方法についてお話します(詳細コード解説)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。