[B! jQuery][フェードイン] kiriya_hazimeのブックマーク

jQuery：ページアクセス、リンク時にフェードする方法 | raining

jQueryを使用してサイトアクセス時にページ内容をフェードインさせる方法と、リンクをクリックした時にフェードアウトしてからページ遷移する方法をメモします。フェードイン、フェードアウトするのに下記のメソッドを使用しています。 fadeIn([speed], [callback]) 指定した要素をフェードインして表示します。 fadeOut([speed], [callback]) 指定した要素をフェードアウトして非表示にします。 ※[callback]は処理終了時に実行する内容を記述します。 ■ フェードイン、フェードアウトする方法「wrapper」の内容がフェードインして表示されます。また、リンクをクリックするとフェードアウトしてページ遷移します。【JS】 <script type="text/javascript" src="http://ajax.google apis.co

kiriya_hazime 2014/10/04

リンク

ページ遷移、読み込み時にふわっと表示するjQueryプラグインを再び修正 [ 2012-02-06 ] | 1：n – DETELU Blog

fadeMoverプラグインの解説ページを別途作成しましたので、下記ページをご覧ください。 jquery.fadeMover – Fadein and Fadeout for jQuery ——- 以下 [ 2012-02-06 ] 以前の内容です —- [ 2012-02-06 追記 ] 最近このページのアクセスがかなり増えているので、記事を見直していたら、制作途中のものを記事にしてしまっていました。もしご利用をお考えになられていても「動かない…wtf…」となっていた方がおられたと思います。。。申し訳ありません。作成途中で「ページ内リンクの動作禁止にしないと使えないよね、これ。。。」と気がつき、機能を付け足していたんですが、公開していたものが動作確認中の途中のスクリプトでした。それが原因でアンカーにclassを指定していたらまったく動作しないようになっていました。もし古いものをご利用さ

kiriya_hazime 2012/07/06

リンク

jquery.fadeMover - Fadein and Fadeout for jQuery

jquery.fadeMoverはページの遷移時にフェードアウト、フェードイン効果をだすためのjQueryプラグインです。 Overview 指定された要素をフェードインしながら表示し、<a>タグをクリックしてページを移動する場合にフェードアウトしてから移動します。 <a href="#top">など、ページ内リンクの指定をしている<a>タグはフェードアウト動作禁止にしています。 [2012-08-28] 「nofadeOut」で複数classの指定がある場合動作するように修正しました。（hasClassでチェック）。あとファイルを直接ダウンロードするように修正しました。 [2012-02-16] 以前作成していたものに少し手を加え、要素を順番にフェードアウト、フェードインさせるオプション「inDelay」「outDelay」もつけました。フォトギャラリー等で少し変わった動きがほしい場

kiriya_hazime 2012/02/25

リンク

kojilow Blog | ページ遷移時にフェードイン・フェードアウト

Re:designのサイトで設置した、jQueryを使用してページ遷移時にフェードイン・フェードアウトさせる方法 //インラインCSSで#wrapper{display;block;}を追加 $(‘head’).append(‘<style type=”text/css”>#wrapper{display;none;}</style>’); $(function(){ //読み込み時にフェードイン $(‘#wrapper’).fadeIn(1000); //aタグクリック時にフェードアウト実行 $(‘#navi a, a.windowFade’).click(function(){ var url = $(this).attr(“href”); $(‘#wrapper’).animate({“opacity”:0},1000,function(){ location.href = url;

kiriya_hazime 2012/02/24

リンク

jQuery: ページの読み込み時にフェードイン

速度を数字で調節する際はカッコのなかの""は不要。jquery.jsを加えるのも忘れずに。 <script type="text/javascript"> $(document).ready(function() { $('#wrapper').fadeIn("slow"); }); </script> html <div id="wrapper"> ここにコンテンツ </div> css #wrapper{ display: none; } 追記【2012/7/19】：Flash部分には反映されないようです。関連記事ドロワーメニューjQuery Drawerコピペ用ソース jQuery でタブ切り替えコンテンツ jQuery トグル開閉 jQuery: ページの読み込み時にフェードイン jQuery で target="_blank"　を使わず別ウィンドウ