jQueryエフェクトの使い方

.hide()
一致する要素を非表示にします。
.hide()
このメソッドはパラメータを受け入れません。
.hide([duration][,complete])
duration
アニメーションの実行時間を決定する文字列または数値。
Complete
アニメーションが完了したときに実行される関数。
.hide([duration][,easing][,complete])
duration
アニメーションの実行時間を決定する文字列または数値。
イージング
トランジションにどのイージング関数を使用するかを示す文字列。
complete
アニメーションが完了したときに実行される関数。
使用法:
this).hide(2000,function(){
$(this).remove()
})
})


.show()
一致する要素を表示します。

.show()

このメソッドはパラメータを受け入れません。
.show([duration][,complete])
Duration
アニメーションの実行時間を決定する文字列または数値。
complete
アニメーションが完了したときに実行される関数。
.show([duration][,easing][,complete])
duration
アニメーションの実行時間を決定する文字列または数値。
イージング
トランジションにどのイージング関数を使用するかを示す文字列。
complete
アニメーションが完了したときに実行される関数。
使用法:
$("button").click(function () {
("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});


.toggle()

一致する要素を表示または非表示にします。

.toggle()
このメソッドはパラメータを受け入れません。
.toggle([duration][,complete])

Duration

アニメーションの実行時間を決定する文字列または数値。
complete
アニメーションが完了したときに実行される関数。
.toggle([duration][,easing][,complete])
duration
アニメーションの実行時間を決定する文字列または数値。
イージング
トランジションにどのイージング関数を使用するかを示す文字列。
complete
アニメーションが完了したときに実行される関数。
使用法:
$("button").click(function () {
$("p").toggle();
});


.animate()
CSSプロパティのセットに基づいてカスタムアニメーションを実行します。
.animate(PROperties[,duration][,easing][,complete])
properties
CSSのプロパティと値のオブジェクトで、アニメーションはこのオブジェクトのセットに従って動きます。

duration (デフォルト: 400)

アニメーションの実行時間を決定する文字列または数値。
イージング(デフォルトスイング)
どのイージング関数が過剰に使用されているかを示す文字列。

complete

アニメーションが完了したときに実行される関数。
.animate(properties,options)
properties
CSSのプロパティと値のオブジェクトで、アニメーションはこのオブジェクトのセットに従って動きます。
options
アニメーションオプションを含む値のコレクション。
使用法:
$("#go").click(function(){
$("#block").animate({
, fontSize: "3em",
mate ({"left": "+=50px) "}, "slow");
});
左側のプロパティが50、透明度が1(つまり不透明で表示される)になるように、すべての段落にアニメーションを適用します。時間は500ミリ秒かかります。
$( "p" ).animate({
左: 50, 不透明度: 1
}, 500 );

.lay()
キュー内の後続のアイテムの実行を遅らせる遅延を設定します。
.delay(duration[,queueName])
duration
次のキューの実行を遅延させる時間を設定するために使用されるミリ秒数を示す整数。
queueName
キュー名として使用される文字列。
効果:

の .slideUp() アニメーションと .fadeIn() アニメーションの間に 800 ミリ秒の遅延を設定できます:
$('#foo').slideUp(300) 。 late(800).fadeIn(400);

2つのdivを非表示にしてから表示します。緑色の div が表示されるまでに 800 ミリ秒の遅延があります。
$("button").click(function() {
$("div.first").slideUp(300).lay(800).fadeIn(400);
$("div.first").slideUp (300).fadeIn(400);
});

.stop()
現在実行中の一致する要素のアニメーションを停止します。
.stop([clearQueue][,jumpToEnd])
clearQueue
キューアニメーションをキャンセルするかどうかを示すブール値。デフォルトは false です。デフォルト false;
.stop([queue] [,clearQueue] [,jumpToEnd ] )
queue
停止アニメーションキューの名前。
clearQueue
キューアニメーションをキャンセルするかどうかを示すブール値。デフォルト false.
jumpToEnd
現在のアニメーションがすぐに完了するかどうかを示すブール値。デフォルト false.
使用法:
$("#stop").click(function(){
$(".block").stop();
}); //この操作がクリックされると、すぐにアニメーションを停止します。 。

.fadeIn()

一致する要素をフェードインして表示します。
.fadeIn([duration][,complete])
duration(default: 400)
アニメーションの実行時間を決定する文字列または数値。
complete
アニメーションが完了したときに実行される関数。
.fadeIn(options)
アニメーションオプションを含む値のコレクション。
.fadeIn([duration][,easing][,complete])
duration(default: 400)
アニメーションの実行時間を決定する文字列または数値。
easing(default:swing)
トランジションにどのイージング関数を使用するかを示す文字列
complete
アニメーションが完了したときに実行される関数。
使い方:
$(".btn2").click(function(){
$("p").fadeIn();
});

.fadeOut()

フェードアウトして一致する要素を非表示にします。
.fadeOut([duration][,complete])
duration(default: 400)
アニメーションの実行時間を決定する文字列または数値。
complete
アニメーションが完了したときに実行される関数。
.fadeOut(options)
アニメーションオプションを含む値のコレクション。
.fadeOut([duration][,easing][,complete])
duration(default: 400)
アニメーションの実行時間を決定する文字列または数値。
easing(default:swing)
トランジションにどのイージング関数を使用するかを示す文字列
complete
アニメーションが完了したときに実行される関数。
使用法:
$(".btn2").click(function(){

.fadeTo()
一致する要素の透明度を調整します。
.fadeTo(duration,opacity[,complete])
duration
アニメーションの実行時間を決定する文字列または数値。
opacity
対象要素の不透明度を表す0から1までの数値
complete
アニメーションが完了したときに実行される関数。
.fadeTo(duration,opacity[,easing][,complete])
Duration
アニメーションの実行時間を決定する文字列または数値。
不透明
 
使用法:
display","none");
})
})


.fadeToggle()
不透明度アニメーションに合わせて要素を表示または非表示にします。
.fadeToggle([duration][,easing][,complete])
duration(default: 400)

アニメーションの実行時間を決定する文字列または数値。

イージング(デフォルト:スイング)
トランジションにどのイージング関数を使用するかを示す文字列
complete
アニメーションが完了したときに実行される関数。
.fadeToggle(opacity)
opacity
アニメーションオプションを含む値のコレクション。
使い方:
$("input").click(function(){
$('#div1').fadeToggle(2000)
})


.slideDown()
スライドアニメーションを使って一致する要素を表示します。
.slideDown([duration][,complete])
duration

アニメーションの実行時間を決定する文字列または数値。

complete
アニメーションが完了したときに実行される関数。
.slideDown(opacity)
opacity
アニメーションオプションを含む値のコレクション。
.slideDown([duration][,easing][,complete])
Duration
アニメーションの実行時間を決定する文字列または数値。
イージング
どのイージング関数が過剰に使用されているかを示す文字列。
complete
アニメーションが完了したときに実行される関数。
使用方法:
$("input").click(function(){
$('#div1').slideDown(2000)
})


.slideUp()
スライドアニメーションを使用して、一致する要素を非表示にします。
.slideUp([duration][,complete])
Duration

アニメーションの実行時間を決定する文字列または数値。

complete
アニメーションが完了したときに実行される関数。
.slideUp(opacity)
opacity
アニメーションオプションを含む値のコレクション。
.slideUp([duration][,easing][,complete])
duration
アニメーションの実行時間を決定する文字列または数値。
イージング
どのイージング関数が過剰に使用されているかを示す文字列。
complete
アニメーションが完了したときに実行される関数。
使用法:
要素。
.slideToggle([duration][,complete])
duration
アニメーションの実行時間を決定する文字列または数値。
complete
アニメーションが完了したときに実行される関数。
.slideToggle(opacity)
opacity
アニメーションオプションを含む値のコレクション。

.slideToggle([duration][,easing][,complete])

duration
アニメーションの実行時間を決定する文字列または数値。
イージング
どのイージング関数が過剰に使用されているかを示す文字列。
complete
アニメーションが完了したときに実行される関数。
効果:
$("input").click(function(){
$('#div1').slideToggle(2000)
})

上記は jQuery エフェクトの内容です。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) をご覧ください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。