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

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

1. show() 表示効果

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

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

2. Hide() 隠し効果

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

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

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

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

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

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

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

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

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

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

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

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

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

パラメータは角括弧で囲む必要があり、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

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

に影響します。

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