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衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

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

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

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

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

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

ホットトピック











公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex
