jQueryを使っています。
「<ul id="cat-list">」の「href」を取得して画像を切り替えています。
その際にフェードアウトして画像が消え、次の画像をフェードインさせながら表示したいと考えています。
(クロスフェードならなお良いです。)
色々試したのですが、フェードのタイミングがうまく合ってくれません。
どのように記述したらいいでしょうか。
<script type="text/javascript">
$(function(){
$("#cat-list a").click(function(){
$("p#cat img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
$("p#cat-name").text($(this).text());
return false;
});
});
</script>
<p id="cat"><img src="images/cat01.jpg" alt="ネコ1" /></p>
<p id="cat-name">ネコ1</p>
<ul id="cat-list">
<li><a href="images/cat01.jpg">ネコ1</a></li>
<li><a href="images/cat02.jpg">ネコ2</a></li>
<li><a href="images/cat03.jpg">ネコ3</a></li>
<li><a href="images/cat04.jpg">ネコ4</a></li>
<li><a href="images/cat05.jpg">ネコ5</a></li>
</ul>
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
こんなことでしょうか?
$(function(){
$("#cat-list a").click(function(){
var src = $(this).attr("href"), text = $(this).text();
$("p#cat img").fadeOut("slow", function(){
$(this).attr({src: src, alt: text}).fadeIn("slow");
$("p#cat-name").text(text);
});
return false;
});
});
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライドショーの画像にリンク...
-
jQueryのclickイベントハンドラ
-
画像にマウスを乗せた時のJava ...
-
Dreamweaver上とデバイスプレビ...
-
エンドロールを枠の中で表示す...
-
Flickrのような綺麗なサムネイ...
-
キャラクターがぴょこんと飛び...
-
jspでcssが読み込めない
-
スクロール可能なチェックボックス
-
jQueryでネスト構造の<li>がク...
-
1枚の画像をクリックすると複数...
-
401エラードキュメントを401.ht...
-
変数名をどのようにつけるのが...
-
HTML id名とjavascript変数名
-
ディレクトリ内画像表示
-
【javascript で動的に a タグ...
-
オンマウスで、画像切り替え+...
-
IplImageをPictureBoxへ表示が...
-
PC設定に依存しない曜日判定JS...
-
特定の画像を非表示にする方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
キャラクターがぴょこんと飛び...
-
【jQuery】2分割レイアウトで、...
-
スライドショー「Skitter」をカ...
-
スライドショーの画像にリンク...
-
画像をフェードアウト&フェー...
-
Dreamweaver上とデバイスプレビ...
-
アコーディオンメニューが開い...
-
神経衰弱 順番に裏返し
-
楽天APIのデータをjqueryのgetJ...
-
swiper.jsについて
-
エンドロールを枠の中で表示す...
-
順番にクラスをつけていく方法
-
画像にマウスを乗せた時のJava ...
-
bxsliderでスライドショーの間...
-
複数の要素へ appendchild でき...
-
jQueryでタブ、スライダーを使...
-
SimplyScrollについて
-
bxSliderのランダム表示について
-
javascript 神経衰弱
おすすめ情報