ホームページ  >  記事  >  ウェブフロントエンド  >  jquery が知っておくべき一般的な特殊効果の方法と使用例 (整理)_jquery

jquery が知っておくべき一般的な特殊効果の方法と使用例 (整理)_jquery

WBOY
WBOYオリジナル
2016-05-16 17:31:47994ブラウズ

1.jQuery fadeIn() は、非表示の要素をフェードインするために使用されます。
構文:
$(selector).fadeIn(speed,callback);
例:

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

$("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn ("slow "); $("#div3").fadeIn(3000);});

2.jQuery fadeOut() メソッドは、表示要素をフェードアウトするために使用されます。
構文:
$(selector).fadeOut(speed,callback);

3.jQuery fadeToggle() メソッドは fadeIn() メソッドと fadeOut() メソッドを切り替えることができます。
fadeToggle() は、要素がすでにフェードアウトしている場合に、要素にフェードイン効果を追加します。
要素がすでにフェードインしている場合、fadeToggle() は要素にフェードアウト効果を追加します。
構文:
$(selector).fadeToggle(speed,callback);
例:
コードをコピー コードは次のとおりです:

$("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle ("slow "); $("#div3").fadeToggle(3000);});

ここで、一般に jquery には、単一の方法。下のものも上下に動かします。

4. 構文:
$(selector).fadeTo(speed,opacity,callback);
必要な速度パラメーターは効果の持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
fadeTo() メソッドの必須の不透明度パラメーターは、フェード効果を指定された不透明度 (0 から 1 までの値) に設定します。例
コードをコピー コードは次のとおりです。

$("button").click (function( ){
$("#div1").fadeTo("遅い",0.15);
$("#div2").fadeTo("遅い",0.4);
$( "#div3 ").fadeTo("slow",0.7);

5.jQuery slideDown() メソッドを使用して要素を下にスライドさせます。
構文:
$(selector).slideDown(speed,callback);
$("#flip").click(function(){ $("#panel").slideDown();} );

6.jQuery slideUp() メソッドを使用して要素を上にスライドさせます。
構文:
$(selector).slideUp(speed,callback);
オプションのスピードパラメータはエフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバック パラメーターは、スライディングの完了後に実行される関数の名前です。

7. jQueryの slideToggle() メソッドは、slideDown() メソッドと slideUp() メソッドを切り替えることができます。
要素が下にスライドする場合、slideToggle() は要素を上にスライドさせます。
要素が上にスライドする場合、slideToggle() は要素を下にスライドします。
$(selector).slideToggle(speed,callback);

8. カスタム アニメーションの作成には jQuery animate() メソッドが使用されます。
構文:
$(selector).animate({params},speed,callback);
必須の params パラメーターは、アニメーションを形成する CSS プロパティを定義します。
オプションの速度パラメーターは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバック パラメーターは、アニメーションの完了後に実行される関数の名前です。
相対値を定義することもできます (値は要素の現在の値に対する相対値です)。値の前に = または -= を追加する必要があります:
アニメーションのグループを定義してキュー関数を実装することもできます。
次の例は、animate() メソッドの簡単なアプリケーションを示しています。
Example

コードをコピー コードは次のとおりです:
$("button").click(function(){ $("div ").animate({left :'250px'});});

9. jQuery stop() メソッドは、アニメーションやエフェクトが完了する前に停止するために使用されます

10. アニメーションが 100% 完了したら、Callback 関数が呼び出されます。
一般的な構文:
$(selector).hide(speed,callback)

11.jQuery メソッド リンク
一部の要素は 1 回だけ取得する必要があるため、リンクを使用してメソッドを追加します。
メソッドポイントメソッドです。
$("#p1").css("color","re​​d").slideUp(2000).slideDown(2000); などです。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。