検索:ダリの雑記:WEBプログラム版タグ:フェードjavascriptでフェードイン・フェードアウトその2前回も同様の記事を書いたんですが、正直問題だらけであまり使い物になりません。Bingっぽい挙動に近づけないものか、と調べていたら、こちらのページでいい方法を見つけました。RoomさんのサイトjQueryか~。protetypeはよく使うけど、jQueryは初めて。サイトに載っていたスクリプトを元に改造を施してみました。サンプル手順1.まずはjQueryをダウンロードします。(ダウンロードサイト)2.今回はスクリプトを外部ファイルに記述します。fade.jsというファイルをUTF-8で作成し、そこに以下のスクリプトを記述します。this).css("display","none");fade_link.fadeOut(300);}});}});jQueryでは$(".クラス名")でオブジェクトを取得できます。ID名で取得する場合は$("#ID名")となります。フェードについては以下の関数で行います。[callback])」でも行えます。fadeToのほうが、最終的な不透明度を指定できるので、やや透明にしたい場合は「fadeTo」を利用してください。3.1.でダウンロードした「jquery.js」ファイルと、2.で作った「fade.js」をheadタグで呼び出します。src="js/fade.js"></script>4.bodyタグ内にマーカーとテキストを以下のように記述します。href='http://www.yahoo.co.jp'><span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト1</span></a></div></div></div>ここで必要なclass名はclass='fade'class='fade_content'class='fade_marker'class='fade_link'class='fade_text'の以上5つです。2.のスクリプトではこのclass名を元にデータを取得しています。フェードエリアはposition:absolute;にするので「class='fade'」のタグはstyle記述にて位置を設定してください。5.最後にスタイルを設定します。#FFFFFF;}</style>外部ファイルにする場合は、headタグで呼び出してください。/>なおスタイルに記述されている「background-image:url(img/fade_bk.gif);」の画像ですが、なぜかさくらインターネットだけposition:absoluteの設定にするとhoverによるフェードができなかったため苦肉の策で追加した透明gif画像です。なくても正常に動作するようならばその記述は削除してもかまいません。(ダウンロード)※サンプルでは4つのフェードマーカーを作っています。前回の問題点であった、フェード中のhoverが対応できていない。同様に素早くマウスをhoverさせると表示がぶれる、などが一気に解決しました。(Animeより[2019/11/23])WordPressのパーマリンクでindex.phpが勝手に挿入される。雑多エンジニアのひとりごとより[2019/11/11])WordPressのパーマリンクでindex.phpが勝手に挿入される。(94アクセス)プロフィール和歌山でウェブプログラマーをやってます。使える言語はHTML・PHP・Javascriptなど。Perlも扱えるようになるといいなぁ、と思う今日この頃。ついでに書くと、漫画・アニメが大好きなオタクです。最近はアクアリウムにはまり中。