質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

2回答

987閲覧

jQueryのホバーエフェクト処理について

isekaitenseiSAO

総合スコア6

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/12/09 14:21

編集2022/01/12 10:55

jQueryでボタンにかざしたらimgが変更するというものを作りたいです。 

2枚の画像をクラスの中に入れてpositionで二枚の画像を2重にしてopacityでホバーしたら1枚目の画像が、外したら2枚目の画像が表示するという感じです。うまく反映されないのがなぞっちい。 
jQueryのコードは多分あってると思うんですけど、動かないからあってないんでしょう。
どこが間違ってるかわからんぜよ

<div id="buttons2"> <div class="circle-b"> <button class="circle-box-b"> <span> <img src="https://www.shiftbrain.com/book/jquery/sample/chapter04/03/img/01_gr.png" alt=""> <img src="https://www.shiftbrain.com/book/jquery/sample/chapter04/03/img/01_bl.png" alt=""><br>ELEPHANT </span> </button> <button class="circle-box-b"> <span> <img src="https://www.shiftbrain.com/book/jquery/sample/chapter04/03/img/02_gr.png" alt=""> <img src="https://www.shiftbrain.com/book/jquery/sample/chapter04/03/img/02_bl.png" alt=""><br>GIRAFFE </span> </button> <button class="circle-box-b"> <span> <img src="https://www.shiftbrain.com/book/jquery/sample/chapter04/03/img/03_gr.png" alt=""> <img src="https://www.shiftbrain.com/book/jquery/sample/chapter04/03/img/03_bl.png" alt=""><br>WOLF </span> </button> <button class="circle-box-b"> <span> <img src="https://www.shiftbrain.com/book/jquery/sample/chapter04/03/img/04_gr.png" alt=""> <img src="https://www.shiftbrain.com/book/jquery/sample/chapter04/03/img/04_bl.png" alt=""><br>RHINOCEROS </span> </button> </div> </div>

一部のcssコード

.circle-b{ margin-top: 30px; position: relative; margin: 0 auto; } .circle-box-b img:first-child{ position: absolute; } .circle-box-b img:nth-child(2){ opacity:0 ; position: absolute; }

jQueryのコード

var duration = 300; $(".circle-box-b").each(function(index){ $(this).eq(index); $(".circle-box-b").eq(index).css({ top:30*index, left:220*index }); $('circle-box-b').on({ 'mouseover':function(){ var $btn = $(this).stop(true).animate({ backgroundColor:'yellow', color:'#000' },duration); $btn.find('img:first-child').stop(true).animate({ opacity:0 },duration); $btn.find('img:nth-child(2)').stop(true).animate({ opacity:1 },duration); }, 'mouseout':function(){ var $btn = $(this).stop(true).animate({ backgroundColor:'#fff', color:'#01c169' },duration); $btn.find('img:first-child').stop(true).animate({ opacity:1 },duration); $btn.find('img:nth-child(2)').stop(true).animate({ opacity:0 },duration); } }); }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/12/09 14:32

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答2

0

こんな感じにしたほうが効率的では?

javascript

1<script> 2$(function(){ 3 var img=[]; 4 $('[data-newsrc]').each(function(x){ 5 /* データ先読み */ 6 img[x]=new Image(); 7 img[x].src=$(this).data('newsrc'); 8 }).on({ 9 'mouseover':function(){ 10 $(this).data('defaultsrc',$(this).attr('src')); 11 $(this).attr('src',$(this).data('newsrc')); 12 }, 13 'mouseout':function(){ 14 $(this).attr('src',$(this).data('defaultsrc')); 15 }, 16 }); 17}); 18</script> 19<img src="1.jpg" data-newsrc="2.jpg"> 20<img src="3.jpg" data-newsrc="4.jpg"> 21

投稿2018/12/10 00:59

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

コメント参照。

js

1 var duration = 300; 2 3 $(".circle-box-b").each(function(index){ 4 $(this).eq(index); 5 $(".circle-box-b").eq(index).css({ 6 top:30*index, 7 left:220*index 8 }); 9 }); /* eachの中でイベントを登録すると多重にイベントを実行してしまいます。 */ 10/* ↓ 抜けてます。 */ 11 $('.circle-box-b').on({ 12 'mouseover':function(){ 13 var $btn = $(this).stop(true).animate({ 14 backgroundColor:'yellow', 15 color:'#000' 16 },duration); 17 18 $btn.find('img:first-child').stop(true).animate({ 19 opacity:0 20 },duration); 21 22 $btn.find('img:nth-child(2)').stop(true).animate({ 23 opacity:1 24 },duration); 25 }, 26 'mouseout':function(){ 27 var $btn = $(this).stop(true).animate({ 28 backgroundColor:'#fff', 29 color:'#01c169' 30 },duration); 31 32 $btn.find('img:first-child').stop(true).animate({ 33 opacity:1 34 },duration); 35 36 $btn.find('img:nth-child(2)').stop(true).animate({ 37 opacity:0 38 },duration); 39 } 40 }); 41 42 43```**動くサンプル:**[https://jsfiddle.net/uptzvxa9/](https://jsfiddle.net/uptzvxa9/)

投稿2018/12/09 15:18

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問