1つ。表示、非表示
jQueryのディスプレイメソッドは:.show()と非表示方法です。.hide()。パラメーターがない場合、コンテンツを表示して非表示にするのは難しいです。
$( '。show')。クリック(function(){//トリガーイベント$( '#box')。show(); // show}); $( '。非表示')。クリック(function(){//トリガーイベント$( '#box')。hide(); // hide});.show()および.hide()メソッドでは、パラメーターを渡すことができ、ミリ秒単位で速度を制御します(1000ミリ秒は1秒です)。また、透明性の変化と同様に、増加して減少するための一定の速度が豊富です。
$( '。show')。クリック(function(){$( '#box')。show(1000); //表示に1秒かかりました}); $( '。非表示')。クリック(function(){$( '#box')。非表示(1000); //非表示に1秒かかった});速度を制御するためにミリ秒を直接使用することに加えて、jQueryは、それぞれ600ミリ秒、400ミリ秒、200ミリ秒に対応する、ゆっくり、正常、高速の3つのプリセット速度パラメーター文字列も提供します。
$( '#box')。show( 'slow'); // 600 milliseconds $( '#box')。show( 'normal'); // 400 milliseconds $( '#box')。show( 'fast'); // 200ミリ秒
注:ミリ秒を渡すか、プリセット文字列を渡すか、誤ってエラーを渡すか、空の文字列を渡す場合。その後、デフォルト値:400ミリ秒がかかります。
.show()と.hide()のコールバック関数を使用して、キューアニメーション効果を実現します。
(1)関数名を使用して自分を呼び出します
$( '。show')。クリック(function(){$( '#box')。show( 'slow'、function showspan(){$(this).next()。show( 'sell'、showspan);});})(2)arguments.calleeを使用して、匿名関数を呼び出します
$( '。show')。click(function(){$( '#box')。show( 'slow'、function(){$(this).next()。show( 'sell'、arguments.callee);};});}).show()および.hide()を使用する場合、切り替えるためにボタンが必要な場合は、条件付き判断を下す必要があります。 jQueryは、同様の機能を備えた個別の方法を提供します:.toggle()。
$( '。トグル')。
二。スライドとスクロールjQueryは、要素の高さを変更する一連のメソッドを提供します:.slideup()、.slidedown()、および.slidetoggle()。名前が示すように、上向き(巻物)を縮小し、下方に拡張(スライド)。
$( '。ダウン')。クリック(function(){// $( '#box')。slidedown();}); $( '。up')。click(function( '#box')。slideup();}); $( '。トグル')。注:スライドとスクロールの効果は、ディスプレイや隠された効果と同じであり、同じパラメーターを持っています。
三つ。フェードイン、フェードアウト
jQueryは、透明性の変更に関する一連のメソッドを提供します:.fadein()と.fadeout()は、それぞれフェードインおよびフェードアウトを表します。もちろん、自動スイッチング方法:.fadetoggle()もあります。
$( '。in')。click(function(){// $( '#box')。fadein( 'slow');}); $( '。out')。click(funce( '#box')。 });上記の3つの透明性方法は、0から100まで、または100から0のみです。指定された値を設定する場合は、方法はありません。 jQueryは、この問題を解決するために.fadeto()メソッドを提供します。
$( '。トグル')。クリック(function(){$( '#box')。fadeto( 'slow'、0.33); //0.33は値が33%});PS:値の数は0〜1です。
4。カスタムアニメーション
jQueryは、使用するいくつかのシンプルで一般的に使用される固定アニメーションの側面を提供します。しかし、時には、これらのシンプルなアニメーションが私たちのより複雑なニーズを満たすことができないこともあります。この時点で、jQueryは.animate()方法を提供して、より複雑で変更可能な要件を満たすためにカスタムアニメーションを作成します。
$('。Animate ')。クリック(function(){$('#box ')。animate({' width ':' 300px '、' fontsize ':' 50px '、' ofacity ':0.5});});注:CSSの変更はアニメーション効果です。上記の例では、すでに4つのCSSの変更があり、複数のアニメーションの同期運動の効果が達成されています。
渡す必要があるパラメーターは1つだけです。これは、キー価値ペアCSSスタイルを持つオブジェクトです。 2つのオプションのパラメーター、つまり速度とコールバック関数があります。
$( '。Animate')。click(function(){$( '#box')。animate({'width': '500px'、 'height': '400px'、}、function(){alert( 'execution complete');});});これまで、私たちはまだ固定された位置を持つアニメーションを作成しました。動きの状態にビットの動きの写真を実装する場合は、カスタムアニメーションを使用して、それらをCSSの絶対的な位置決め関数と組み合わせる必要があります。
$('。Animate ')。click(function(){$('#box ')。animate({' top ':' 300px '、// CSSの絶対的な位置決めは、最初に'左に設定する必要があります: '200px'});});PS:参照オブジェクトは最初にCSSで設定する必要があり、絶対的な位置決め
カスタムアニメーションでは、各開始モーションが初期位置または初期状態にある必要があり、時には現在の位置または状態を通じてアニメーション化したい場合があります。 jQueryは、カスタムアニメーションを追加および削減する機能を提供します。
$( '。Animate')。クリック(function(){$( '#box')。animate({左: '+= 100px'、width: '+= 100px'、height: '+= 100px'});});五。キューアニメーションメソッド
以前にキューアニメーションを既に実装できます。同じ要素の場合、順番に呼ばれるか、連結することができます。別の要素の場合、コールバック関数を使用できます。ただし、キューアニメーションが多すぎる場合があり、コールバック関数の読みやすさが大幅に減少します。この目的のために、jQueryは、キューに囲まれたアニメーションに特別に使用される一連のメソッドを提供します。
//接続はシーケンスキューに実装できません
$( '#box')。slideup( 'slow')。slidedown( 'slow')。css( 'background'、 'orange');
注:アニメーションメソッドがアニメーション化されている場合、ligatureは順番にキューに留められますが、.css()メソッドはアニメーションメソッドではなく、キューが最初に渡される前になります。次に、アニメーションメソッドコールバック関数を使用して問題を解決できます。
//コールバック関数を使用して、$( '#box')。slideup( 'slow')。slidedown( 'slow'、function({$(this).css( 'background'、 'orange');}); slideup( '#box')。しかし、この場合、キューに登録されたアニメーションが多い場合、読みやすさは低下するだけでなく、元のアニメーション方法が十分に明確ではありません。したがって、私たちの考えは、各操作が独自の独立した方法であるということです。次に、jQueryはコールバック関数と同様のメソッドを提供します:.queue()。
// .queue()メソッドを使用してアニメーションメソッド$( '#box')。slidedown( 'slow')。queue(function(){$(this).css( 'background'、 'orange');}); function( 'slow')。ここで、.queue()メソッドに非表示のアニメーションを追加し続けたいと考えていますが、実装することは不可能であることがわかりました。これは、.queue()機能によって引き起こされます。解決策:jQuery's .Queue()のコールバック関数は、次の関数であるパラメーターを渡すことができます。最後に次の()メソッドを呼び出して、キューアニメーションを実行します。
//次のパラメーターを使用して、連続コールキューアニメーション$( '#box')。slideup( 'slow')。slidedown( 'slow')。queue(function(next {$(this).css( 'background'、 'orange'); next();})。ps:.queue()メソッドには別の関数もあります。これは、現在のアニメーションキューの長さを取得することです(詳細には実証されていません)
jQueryは、キューをクリーンアップする機能的な方法も提供します:.clearqueue()。キューのコールバック関数または.queue()メソッドに入れてください。実行される残りのキューは削除できます。
//アニメーションキュー$( '#box')。slidedown( 'slow'、function(){$(this).clearqueue()});六。アニメーション関連の方法
多くの場合、アニメーションの実行を停止する必要があり、jQueryはこのために.Stop()メソッドを提供します。 2つのオプションのパラメーターがあります。.Stop(ClearQueue、gotoend); Clearqueueはブール値を渡します。ブール値は、不明確なアニメーションキューをクリアするかどうかを表し、GoToendは実行するアニメーションを最後の状態に直接ジャンプするかどうかを表します。
$('。Animate ')。クリック(function(){$('#box ')。animate({' left ':' 300px '}、1000); $('#box ')。 $( '#box')。animate({'height': '300px'}、1000); animate({'height': '300px'}、1000);}); $('。Stop ')。クリック(function(){$('#box ')。stop(true、false);});//注:最初のパラメーターは、キューアニメーションをキャンセルするかどうかを示します。デフォルトはfalseです。パラメーターがtrueの場合、キューアニメーションがあるときに後続のキューアニメーションがキャンセルされます。 2番目のパラメーターは、現在のアニメーションの終わりに達するかどうかを示し、デフォルトはfalseです。パラメーターが真の場合、停止後すぐに終了します。自分でコピーして体験できます。
アニメーションやキューに登録されたアニメーションを実行すると、モーションの前に遅延があり、jQueryはこのために.delay()メソッドを提供する場合があります。この方法では、アニメーションの前に遅延を設定したり、キューのアニメーションの中央に追加したりすることができます。
//開始遅延は1秒で、中央の遅延は1秒です。$( '。アニメート')。 'width': '300px'}、1000);
arguments.calleeは、機能を表す関数で実行されます。一般的に匿名関数で使用されます。匿名関数では、自分自身を呼び出す必要がある場合がありますが、匿名関数であるため、名前がなく、調整可能です。この時点で、arguments.calleeは匿名関数の代わりに使用できます
// selfを再帰的に実行し、無限ループexecute $( '#box')。slidetoggle( 'slow'、function(){$(this).slidetoggle( 'sell'、arguments.callee);});$ .fx.offプロパティは、すべてのアニメーション効果をオフにできます。
$ .fx.off = true; //デフォルトはfalseです
すべてが理解されています。
上記は、編集者が紹介したjQueryアニメーション効果コード共有です。それがあなたに役立つことを願っています。