ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryが知っておくべき一般的な特殊効果の方法と使用例(整理)
この記事では、次のような一般的に使用される特殊効果の例をまとめました。 jQuery fadeIn() は非表示の要素をフェードインするために使用され、jQuery fadeToggle() メソッドは fadeIn() メソッドと fadeOut() メソッドを切り替えることができます。興味のある友達は参考にしてみてください
1.jQuery fadeIn()は、非表示要素をフェードインするために使用されます。
構文:
$(selector).fadeIn(speed,callback);
例:
コードをコピーする コードは次のとおりです:
$("button").click(function(){ $( "#p1 ").fadeIn(); $("#p2").fadeIn("slow"); $("#p3").fadeIn(3000);}); ) メソッド 表示要素をフェードアウトします。
構文:
3.jQuery fadeToggle() メソッドは、fadeIn() メソッドと fadeOut() メソッドを切り替えることができます。
fadeToggle() は、要素がすでにフェードアウトしている場合に、要素にフェードイン効果を追加します。
要素がすでにフェードインしている場合、fadeToggle() は要素にフェードアウト効果を追加します。
構文:
$(selector).fadeToggle(speed,callback);
例:
コードをコピーする
コードは次のとおりです:
$("button").click(function(){ $( "#p1 ").fadeToggle(); $("#p2").fadeToggle("slow");
ここで言いたいのは一般に jquery 個々のメソッドの合成を実現する可逆的な方法があります。下のものも上下に動かします。
$(selector).fadeTo(speed,opacity,callback);
必要な速度パラメータは効果の持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
fadeTo() メソッドの必須の不透明度パラメーターは、フェード効果を指定された不透明度 (0 から 1 までの値) に設定します。例
コードをコピーします
コードは次のとおりです:
$("button").click(function(){ $("#p1").fadeTo("slow",0.15);
$ ("# p2").fadeTo("slow",0.4);$("#p3").fadeTo("slow",0.7);
5.jQuery メソッドはスライド要素を下にスライドさせるために使用されます。
構文:
$(selector).slideDown(speed,callback);
構文:
$(selector).slideUp(speed,callback);
オプションのspeedパラメータは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバックパラメータは、スライドの完了後に実行される
関数
の名前です。
7.jQueryの slideToggle() メソッドは、 slideDown() メソッドと slideUp() メソッドを切り替えることができます。
要素が下にスライドする場合、slideToggle() は要素を上にスライドさせます。
要素が上にスライドする場合、slideToggle() は要素を下にスライドします。
$(selector).slideToggle(speed,callback); 8.jQuery animate() メソッドは、カスタム
animation
を作成するために使用されます。
構文:
$(selector).animate({params},speed,callback);
必須の params パラメーターは、アニメーションを形成する CSS
プロパティ
を定義します。 オプションの速度パラメーターは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。 オプションのコールバックパラメータは、アニメーションの完了後に実行される関数の名前です。
相対値を定義することも可能です(値は要素の現在の値を基準にしています)。値の前に += または -= を追加する必要があります:
アニメーションのグループを定義して
queue 関数を実装することもできます。 次の例は、animate() メソッドの簡単なアプリケーションを示しています。left 属性が 250 ピクセルになるまで
要素を左に移動します。
例
コードをコピーします。以下:
$(" button").click(function(){ $("p").animate({left:'250px'});});
9.jQuery stop() メソッドアニメーションまたはエフェクトが完了する前に停止するために使用されます
10. アニメーションが 100% 完了すると、Callback 関数が呼び出されます。一般的な構文:
$(selector).hide(speed,callback)
一部の要素は一度取得するだけでよいため、リンクを使用してメソッドを追加できます。
その方法です。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
など
以上がjqueryが知っておくべき一般的な特殊効果の方法と使用例(整理)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。