用途
新着
履歴
分類

jQuery フェードインアウト

jQuery フェードインアウト

fadeIn,fadeOutのメソッドは、ミリ秒単位で速さの指定ができます。

jQueryの使う上で、最もシンプルでよく使う演出の一つです。

フェードイン

ページの表示と同時にフェードインさせます。

もう一度見る
$("#demo001 .demo_img").fadeIn();

フェードアウト

ページの表示と同時に3秒かけてフェードアウトします。

もう一度見る
$("#demo002 .demo_img").fadeOut(3000);

フェードアウトからのフェードイン

フェードアウトした後にフェードインして、さらにフェードアウトします。続けて書くことができる例です。

もう一度見る
$("#demo003 .demo_img").fadeOut().fadeIn().fadeOut();

フェードインから次のファンクション

メソッドの中に、フェード後のファンクションを忍ばせておくことも可能です。

この例では、フェードアウトの後にフェードインをさせ、フェードインの後にフェードアウトさせ、繰り返すように書いています。

もう一度見る

$("#demo004 .demo_img").fadeOut(3000,my_fnk);

function my_fnk(){
	$("#demo004 .demo_img").fadeIn(2000,my_fnk2);
}
function my_fnk2(){
	$("#demo004 .demo_img").fadeOut(2000,my_fnk);
}

応用すれば、複数の要素を順々にフェードインさせたり、そのほかのアニメーションにつなげたりできるというわけです。


最後に画像を扱う処理なので、jQueryの発動は画像を読み込む処理で書くのがおすすめです。


$(document).ready(function(){
//HTMLドキュメントを読み込んだら発動する処理
});

$(window).load(function(){
//全ての画像を読み込んだら発動する処理
});
公開 2019-07-29 05:14:24
このページの二次元コード
jQuery フェードインアウト

人気のサンプル

search -  category -  about
© 2024 kipure
Top