jQueryアニメーションイージングの使い方
jQuery API ドキュメントからわかるように、jQuery カスタム アニメーション関数 .animate(properties [,duration] [,easing] [,complete] ) には 4 つのパラメーターがあります:
- プロパティ: 一連のスタイル プロパティとその値 (アニメーション プロパティと最終値として)
- duration (オプション): アニメーションの実行時間。その値は、あらかじめ決められた 3 つの速度 (「遅い」、「遅い」、 "normal"、または "fast")、またはアニメーションの継続時間を示すミリ秒の値 (例: 1000)
- イージング (オプション): 使用するトランジション エフェクトの名前 (例: "linear") または「スイング」
- complete (オプション): アニメーションが完了したときに実行される関数
jQuery イージングの使い方
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="http://code.jquery.com/jquery-1.8.3.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
が導入された後、イージング パラメーターには 32 のオプションの値があります:
- 線形
-
スイング
-
easeInQuad
-
easeOutQuad
-
easeInOutQuad
-
easeInCubic
-
easeOutCubic
-
easeInOutCubic
-
easeInQuart
-
easeOutQuart
-
easeInOutQuart
-
easeInQuint
-
easeOutQuint
-
easeInOutQuint
-
easeInExpo
-
easeOutExpo
-
easeInOutExpo
-
easeInSine
-
easeOutSine
-
easeInOutSine
-
easeInCirc
-
easeOutCirc
-
easeInOutCirc
-
easeInElastic
-
easeOutElastic
-
easeInOutElastic
-
easeInBack
-
easeOutBack
-
easeInOutBack
-
easeInBounce
-
easeOutBounce
- easeInOutBounce
<span style="color: #000000;"> jQuery.extend( jQuery.easing, { easeOutExpo: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (x, t, b, c, d) { </span><span style="color: #0000ff;">return</span> (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; <span style="color: #000000;"> }, easeOutBounce: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (x, t, b, c, d) { </span><span style="color: #0000ff;">if</span> ((t/=d) < (1/2.75<span style="color: #000000;">)) { </span><span style="color: #0000ff;">return</span> c*(7.5625*t*t) +<span style="color: #000000;"> b; } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (t < (2/2.75)) { <span style="color: #0000ff;">return</span> c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } <span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (t < (2.5/2.75)) { <span style="color: #0000ff;">return</span> c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } <span style="color: #0000ff;">else</span><span style="color: #000000;"> { </span><span style="color: #0000ff;">return</span> c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; <span style="color: #000000;"> } }, }); </span>
使用jQuery自定义动画函数animate来指定easing效果,如自定义一种类弹簧效果的动画:
<span style="color: #000000;"> $(myElement).animate({ top: </span>500<span style="color: #000000;">, opacity: </span>1<span style="color: #000000;"> }, </span>1000, 'easeOutBounce');
值得一提的是jQuery 1.4版本中对animate()方法,easing的方法进行了扩展,支持为每个属性指定easing方法,详细请参考这里,如:
<span style="color: #008000;">//</span><span style="color: #008000;">第一种写法</span> <span style="color: #000000;"> $(myElement).animate({ left: [</span>500, 'swing'<span style="color: #000000;">], top: [</span>200, 'easeOutBounce'<span style="color: #000000;">] }); </span><span style="color: #008000;">//</span><span style="color: #008000;">第二种写法</span> <span style="color: #000000;"> $(myElement).animate({ left: </span>500<span style="color: #000000;">, top: </span>200<span style="color: #000000;"> }, { specialEasing: { left: </span>'swing'<span style="color: #000000;">, top: </span>'easeOutBounce'<span style="color: #000000;"> } }); </span>
使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果,以下两种方法都可以:
$(myElement).slideUp(1000<span style="color: #000000;">, method, callback}); $(myElement).slideUp({ duration: </span>1000<span style="color: #000000;">, easing: method, complete: callback }); </span>

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...

Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
