jqueryまとめ2:効果
2207 ワード
非表示、表示
hide()とshow()HTML要素の非表示と表示
$(selector).hide(speed,callback); $(selector).show(speed,callback);
オプションのspeedパラメータは、「slow」、「fast」、またはミリ秒の値をとることができる非表示/表示の速度を規定します.
jQuery toggle()は、非表示の要素を表示し、表示された要素を非表示にします.
$(selector).toggle(speed,callback);
フェードアウト
jQueryには、fadeIn(speed,callback)fadeOut(speed,callback)fadeToggle(speed,callback)fadeTo(speed,opacity,callback)透明度が0-1の4つのfadeメソッドがあります.
スライド
jQueryには、slideDown()slideUp()slideToggle()というスライド方法があります.
アニメーション(Animation)
jQuery animate()メソッドは、カスタムアニメーションを作成するために使用されます.構文:$(selector).animate({params},speed,callback); 必要なparamsパラメータは、アニメーションを形成するCSSプロパティを定義します.オプションのspeedパラメータは、効果の時間を規定します.「slow」、「fast」、またはミリ秒の値を指定できます.オプションのcallbackパラメータは、アニメーションが完了した後に実行される関数名です.
1位置を操作する必要がある場合は、まず要素のCSS position属性をrelative、fixedまたはabsoluteに設定することを覚えておいてください.
2 animate()を使用する場合は、Camelタグ法を使用してすべての属性名を書く必要があります.たとえば、padding-leftではなくpaddingLeftを使用し、margin-rightではなくmargin Rightを使用する必要があります.
jQuery animate()-相対値を使用して、要素の現在の値に対する相対値を定義することもできます.値の前に+=または-=:インスタンス$(「button」)を付ける必要があります.click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); ============================== jQuery animate()-定義済みの値を使用すると、プロパティのアニメーション値をshow、hide、toggle:インスタンス$("button")に設定することもできます.click(function(){ $("div").animate({ height:'toggle' }); }); ==================================
jQuery stop()メソッドjQuery stop()メソッドは、それらが完了する前にアニメーションまたは効果を停止するために使用されます.stop()メソッドは、スライド、フェードアウト、カスタムアニメーションなど、すべてのjQuery効果関数に適用されます.構文$(selector).stop(stopAll,goToEnd); オプションのstopAllパラメータでは、アニメーションキューをクリアするかどうかを指定します.デフォルトはfalseです.つまり、アクティブなアニメーションのみを停止し、キューに配置されたアニメーションを後方に実行できます.オプションのgoToEndパラメータでは、現在のアニメーションをすぐに終了するかどうかを指定します.デフォルトはfalseです.したがって、デフォルトではstop()は、選択された要素で指定された現在のアニメーションをクリアします.次の例はstop()メソッドを示し、パラメータを持たない:インスタンス$("#stop").click(function(){ $("#panel").stop(); });
hide()とshow()HTML要素の非表示と表示
$(selector).hide(speed,callback); $(selector).show(speed,callback);
オプションのspeedパラメータは、「slow」、「fast」、またはミリ秒の値をとることができる非表示/表示の速度を規定します.
jQuery toggle()は、非表示の要素を表示し、表示された要素を非表示にします.
$(selector).toggle(speed,callback);
フェードアウト
jQueryには、fadeIn(speed,callback)fadeOut(speed,callback)fadeToggle(speed,callback)fadeTo(speed,opacity,callback)透明度が0-1の4つのfadeメソッドがあります.
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});スライド
jQueryには、slideDown()slideUp()slideToggle()というスライド方法があります.
アニメーション(Animation)
jQuery animate()メソッドは、カスタムアニメーションを作成するために使用されます.構文:$(selector).animate({params},speed,callback); 必要なparamsパラメータは、アニメーションを形成するCSSプロパティを定義します.オプションのspeedパラメータは、効果の時間を規定します.「slow」、「fast」、またはミリ秒の値を指定できます.オプションのcallbackパラメータは、アニメーションが完了した後に実行される関数名です.
1位置を操作する必要がある場合は、まず要素のCSS position属性をrelative、fixedまたはabsoluteに設定することを覚えておいてください.
2 animate()を使用する場合は、Camelタグ法を使用してすべての属性名を書く必要があります.たとえば、padding-leftではなくpaddingLeftを使用し、margin-rightではなくmargin Rightを使用する必要があります.
jQuery animate()-相対値を使用して、要素の現在の値に対する相対値を定義することもできます.値の前に+=または-=:インスタンス$(「button」)を付ける必要があります.click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); ============================== jQuery animate()-定義済みの値を使用すると、プロパティのアニメーション値をshow、hide、toggle:インスタンス$("button")に設定することもできます.click(function(){ $("div").animate({ height:'toggle' }); }); ==================================
jQuery stop()メソッドjQuery stop()メソッドは、それらが完了する前にアニメーションまたは効果を停止するために使用されます.stop()メソッドは、スライド、フェードアウト、カスタムアニメーションなど、すべてのjQuery効果関数に適用されます.構文$(selector).stop(stopAll,goToEnd); オプションのstopAllパラメータでは、アニメーションキューをクリアするかどうかを指定します.デフォルトはfalseです.つまり、アクティブなアニメーションのみを停止し、キューに配置されたアニメーションを後方に実行できます.オプションのgoToEndパラメータでは、現在のアニメーションをすぐに終了するかどうかを指定します.デフォルトはfalseです.したがって、デフォルトではstop()は、選択された要素で指定された現在のアニメーションをクリアします.次の例はstop()メソッドを示し、パラメータを持たない:インスタンス$("#stop").click(function(){ $("#panel").stop(); });