jQueryアニメーションエフェクト関連メソッドの解析例_jquery

この記事の例では、jQuery アニメーション効果に関連するメソッドについて説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

1. show() 表示効果

構文: show(speed,callback) 数値/文字列、関数 速度はアニメーションの実行時間 (ミリ秒単位) です。コールバックはオプションで、アニメーションの完了時に実行される関数です。

show(speed,[イージング],callback) 数値/文字列イージングのデフォルトはスイングですが、オプションで線形です。

コードをコピー コードは次のとおりです:

$("#div1").show(3000, function() {alert("アニメーション表示完了!") });

2. Hide() 隠し効果

構文: Hide(speed,callback) 数値/文字列,関数

非表示(速度、イージング、コールバック) 数値/文字列

コードをコピーします コードは次のとおりです:

$("#div1").hide(3000, function() {alert("アニメーションの非表示が完了しました") });

3. toggle() は非表示と表示を自動的に切り替えます。現在表示されている場合は非表示になります。

構文: toggle(speed,callback) 数値/文字列,関数

toggle(speed,callback) 数値/文字列、文字列、関数

コードをコピー コードは次のとおりです:

$("#div1").toggle(3000, function() {alert("アニメーション効果の切り替えが完了しました") });

4. slideDown() は下方向に表示し、slow() は水平方向と垂直方向に同時に拡張しますが、slideDown は垂直方向に下方向にのみ拡張します

構文: slideDown(speed,callback) 数値/文字列,関数

slideDown(speed,[easing],callback) 数値/文字列,関数

コードをコピー コードは次のとおりです:

$("#div1").slideDown(3000, function() {alert("下に展開すると正常に表示されます!");

5. slideUp() は上方向に非表示になります。hide() は水平方向と垂直方向の両方で動作しますが、slideUp() は垂直方向の上方向のみを非表示にします。 構文: slideUp(speed,callback) 数値/文字列,関数

slideUp(speed,[イージング],callback) 数値/文字列,文字列,関数

コードをコピー コードは次のとおりです:$("#div1").slideUp(3000, function() {alert("無事隠れました!") })

6. SlideToggle は垂直方向に切り替えますが、slideToggle は垂直方向のみに切り替えられます。
構文: slideToggle(speed,callback) 数値/文字列,関数

slideToggle(speed,[イージング],callback) 数値/文字列,文字列,関数

コードをコピー コードは次のとおりです:$("#div1").slideToggle(3000, function() {alert("水平切り替え成功");

7. fadeIn() は

を表示するように透明度を変更します。 構文: fadeIn(speed,callback) 数値/文字列,関数

フェードイン(速度,[イージング],コールバック) 数値/文字列,関数

コードをコピーします コードは次のとおりです:$("#div1").FadeIn(3000, function() {alert("フェードインが成功しました!") });

8. fadeOut() は透明度を変更して非表示にします
構文: fadeOut(speed,callback) 数値/文字列,関数

fadeOut(speed,[easing],callcack) 数値/文字列,文字列,関数

コードをコピーします コードは次のとおりです:$("#div1").fadeOut(3000, function() {alert("フェードアウトして非表示に成功しました!");

9. fadeToggle()で透明度を変更し、表示・非表示を切り替えます

構文: fadeToggle(speed,callback) 数値/文字列,関数

fadeToggle(speed,[イージング],callback) 数値/文字列,関数

コードをコピーします コードは次のとおりです:

$("#div1").fadeToggle(3000, function() {alert("フェードインとフェードアウトが成功しました!");

10. fadeTo() は指定された時間に指定された透明度に変更します

構文: fadeTo(speed,callback) 数値/文字列,関数

fadeTo([スピード],不透明度,[イージング],[fn]) 数値/文字列,浮動小数点数,文字列,関数

コードをコピーします コードは次のとおりです:

$("#div1").fadeTo(3000, 0.22,function (){alert("透明度が正常に変更されました!" });

11. animate() カスタム アニメーション 一般的に、デジタル変更はアニメーションに使用できます。

構文: animate(params,speed,easing,callback); スタイルパラメータ、時間、オプション、関数

コードをコピー コードは次のとおりです:

$("#div1").animate({ width:300px,高さ,300px },3000);

パラメータは角括弧で囲む必要があり、CSS スタイルのパラメータを使用できます。 font-size は fontSize と記述する必要があるなど、キャメルのルールに注意してください。カラーグラデーションはサポートされていません。

背景位置
境界幅
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
マージン
marginBottom
marginLeft
マージン右
marginTop
アウトライン幅
パディング
パディング下
パディング左
右パディング
パディングトップ
身長
幅
maxHeight
maxWidth
最小身長
maxWidth
フォント
フォントサイズ
下
左
そうです
トップ
文字間隔
wordSpacing
線の高さ
textIndent

12. stop() は実行中のアニメーションを停止します

stop([clearQueue],[gotoEnd]); 両方のパラメータはブール値で、最初のパラメータはアニメーションの実行を停止するかどうかを示し、2 番目のパラメータは停止した場合にすぐに完了状態に移行するかどうかを示します。半分実行された状態に留まる場合は No に設定します。

$("#div1").hide(5000) //此动画正在执行
$("#div1").stop();  //上一行代码指定的动画停止在一半状态
$("#div1").stop(true,true); //停止当前动画，同时动画切换到完成执行状态。

13.lay() アニメーションの実行を遅らせる アニメーションが停止したとき()、遅延()を使用して実行を遅らせることもできます。実行は中断したところから続行されます。もちろん、元の方法で実行を継続することはできませんが、遅延の影響はありません。

lay(duration,[queueName]) アニメーションを実行するための遅延値を設定します Integer,String

コードをコピー コードは次のとおりです:

$("#div1").delay(3000) .hide( 3000); // Hide(3000) が 3000 ミリ秒後に実行されることを示します。

14. jQuery.fx.off //このプロパティは、現在のページのアニメーションをオフにするかどうかだけを示します。アニメーションをオフにした後は、アニメーション効果はなくなり、設定された実行時間のすべてのアニメーションが完了します。即座に。この属性がどこに表示されるかに注意してください。場所が異なれば影響範囲も異なります
。

$(function(){
  jQuery.fx.off = true; //属性在事件外面，对页面加载后执行的所有动画有效
  $("#div1").click(function(){ //属性如果写在这里，仅仅对当前点击事件无效，不影响其他事件的动画
   $("#div1").hide(3000); //注意由于jQuery.fx.off设置为了true,因此3000毫秒失效，相当于hide();
   });
})

15. jQuery.fx.interval //このプロパティは、アニメーションのフレーム レートをミリ秒単位で設定します。時間が小さいほど、スムーズになります。 、属性が表示される位置も範囲

に影響します。

$(function(){
  jQuery.fx.interval = 1000;
  $("#div1").click(function(){
   $("#div1").hide(3000); //jQuery.fx.interval设置为1000，也就是1秒钟，改变一次效果。
   });
})

この記事が jQuery プログラミングのすべての人に役立つことを願っています。