![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
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ランキング
-
【iOS及びAndroid】リンク画像...
-
【jQuery】2分割レイアウトで、...
-
自動でスライドし、伸び縮みす...
-
アコーディオンメニューが開い...
-
Javascriptで画像のフェードイン
-
画像をフェードアウト&フェー...
-
MAX関数を使ってからLEFT JOIN...
-
JSPでの画像ファイル表示
-
javascriptテキストBOX色を元に...
-
連番画像「次へ」「前へ」で、...
-
中心を軸にくるくる回るjQuery ...
-
MFCで画像を表示させているので...
-
大量のチェックボックス状態取...
-
リンク先がそれぞれ別の画像の...
-
htmlとcssに関する質問です
-
window.openで値の渡し方を教え...
-
【javascript で動的に a タグ...
-
jQueryで同じクラス名のものを...
-
ボタンをクリックした時に、キ...
-
javascriptで複数の画像をラン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
同一ページ内の複数のタグに同...
-
【jQuery】2分割レイアウトで、...
-
キャラクターがぴょこんと飛び...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
html5に変えるとスライドショー...
-
Javaスクリプトで画像を縦にス...
-
javascriptで文字サイズの変更
-
jQueryでタブ、スライダーを使...
-
high slideをFC2ブログで
-
ご教授ください。
-
チェックボックスと画像切替の連動
-
jQueryのclickイベントハンドラ
-
Firefoxとクロームでフェードイ...
-
神経衰弱 順番に裏返し
-
アコーディオンメニューが開い...
-
【iOS及びAndroid】リンク画像...
-
fontsize.jsでhtmlの大中小の設...
-
javascript src書き換え
おすすめ情報