定番
新着
履歴

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(){
//全ての画像を読み込んだら発動する処理
});

2018-10-30 19:06:05
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top