初めまして。私は大学の課題でウェブサイトを作成しており、jQueryを勉強しています。
かなりの初心者なのです。
今jQueryでイメージギャラリーのようなものを作っていて、小さい画像にマウスオーバーで触れると、となりに大きい画像がフェードインしつつ表示されるというようにしたいです。
DW上では画像もかわりますし、フェードインもうまくいったのですが、ブラウザで見てみると、画像がぱっと変わるだけでフェードインの効果が反映されていません。
これは何故なのでしょうか・・・。
スクリプトの例は以下です。
$(function(){
$("img.top1").mouseover(function(){
$("#mainimg img").attr("src","img/topimg1.jpg");
$("#mainimg p:not(:animated)").fadeIn("slow");
}) ・・・・
小さい画像のtop1に触れると、divのmainimgという範囲の画像が、top1からtopimg1に変わって、なおかつフェードインされるという風に書いたつもりです・・・。
#mainimgの「p」は、htmlでは、<p id="fadeIn"><img src="img/topimg1.jpg" width="539" height="343" /></p>
というように、#mainimgの範囲のimg要素(大きい画像が表示されるところ)の前に、id名にfadeInと入れた部分のpです。
スクリプトに何か問題があるのかどうかもわかりません。
しかしブラウザで作動しないのはおかしいですよね。
どなたか分かる方がいれば教えてくださると嬉しいです。
よろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
すでに表示されているから、フェードインしないだけだと思いますけど。
それに、p:not(:animated) の意図が不明です。
素直に、
<img class="top1" src="img/S_topimg1.jpg">
<div id="mainimg">
<p id="fadeIn">a<img src="img/topimg1.jpg" width="539px" height="343px"></p>
$(function(){
$("img.top1").mouseover(function(){
$("#mainimg img").hide();
$("#mainimg img").attr("src","img/topimg1.jpg");
$("#mainimg img").fadeIn("slow");
});
})
じゃだめなの。
あるいは$.toggle()を使うとか...
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【OpenCV】二値画像後、白の部...
-
こんにちは、javascriptにてボ...
-
外部javascriptの重複を防ぐには
-
nodejsの画像表示は特別なこと...
-
IplImageをPictureBoxへ表示が...
-
MFCで画像を表示させているので...
-
JavaScriptで変更した属性の元...
-
Vb.net2005での画像の合成方法
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
textareaに画像を表示したい
-
Javascript初心者|jQueryの.va...
-
画像の表示位置
-
window.openで値の渡し方を教え...
-
クリックで色変更後に既に変更...
-
クリックした<a>タグのみにClas...
-
jQueryで画像を重ねる
-
JSPでの画像ファイル表示
-
prettyphotoの画像表示について
-
Slick.jsのオプションrtlについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
MFCで画像を表示させているので...
-
画像が表示でnull; this.src
-
Vb.net2005での画像の合成方法
-
error LNK2019 未解決のシンボ...
-
onclickで画面が固まる・・・ら...
-
リンク先を動的に変更する
-
【OpenCV】二値画像後、白の部...
-
(javascript)HTMLで指定した...
-
jQuery 複数のfind()
-
外部javascriptの重複を防ぐには
-
ラズパイでno module named zbar
-
条件分岐でキーが入力されてい...
-
かぶらないランダム画像
-
OpenCV での画素値の比較について
-
HTMLからimgのsrcのみを正規表...
-
pythonで、tkinterとpillowの組...
-
imgボタンにfocusの当て方
-
OpenCVでサンプルコードを使う...
-
指定したフォルダの画像を一括...
おすすめ情報