jqueryで画像にhoverすると画像の中心から円が出現するようにしたいです。

前提・実現したいこと

jqueryで画像にhoverすると画像の中心から円が出現するようにしたいのですがうまくいきません。以下のようにコードを書いたのですがどこか問題があるでしょうか。よろしくお願いします。
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

(HTML)

 </section>

(CSS)
.g-works {
display: table;
border: 2px solid red
width: 100%;
height: 300px;
table-layout: fixed;
}

.my-works {
position: relative;
display: table-cell;
vertical-align: middle;
padding: 50px;
}

.circle_1 {
position: relative;
display:none;
top:0px;
left:0px;
width:100px;
height: 100px;
background: yellow;
border-radius: 50%;
z-index:1;
}

(jquery)
$(function(){
$(.my-works).hover(function(){
$(this).append("<div class="circle_1"></div>");
$(".circle_1").stop.fadeIn(300);

}),function(){
$(".circle_1").stop().fadeOut(300);
};

jquery

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

H40831

2019/12/27 02:38

マークダウンのcode機能がずれてますよ

Dragon131

2019/12/27 06:03

ありがとうございます！とりあえず円が出るようにはなりました。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず、文法的におかしいところを指摘しますね。

js
1$(function(){
2  $(.my-works).hover(function(){  // クォーテーション漏れ。".my-works"
3    $(this).append("<div class="circle_1"></div>");  // クォーテーションのエスケープ漏れ。'<div class="circle_1"></div>'
4    $(".circle_1").stop.fadeIn(300);  // stopメソッドのかっこがない
5
6  }),function(){  // hoverメソッドのかっこ位置がおかしい。
7    $(".circle_1").stop().fadeOut(300);
8  };  // hoverメソッドのかっこ位置がおかしい。
9// }) ←$(function(){})が閉じていない。

処理フローもおかしいのですが、まずはこの辺を直してから、という気がします。

投稿2019/12/27 03:15

Lhankor_Mhy

総合スコア36087

Dragon131

2019/12/27 05:33

ありがとうございました！かなり基礎的なところが抜けていました。円は出るようになりましたが思ってたのとは全然違う結果でした。処理フローがおかしいのでしょうか。

Lhankor_Mhy

2019/12/27 06:23

「思ってたのとは全然違う」の内容について、あなたの頭の中にしかないので、（想像はできますが）なんとも申し上げにくいところです。「思ってたのとは全然違う」を、たとえば「ホバーするたびに丸が増えてしまうので、増えないようにしたい」などと言語化することから始めてみてはいかがでしょうか。そうすると、「hover関数の中に丸を追加するコードが書かれているから、ホバーするたびに実行されているのでは」などと気づくはずです。

Dragon131

2019/12/27 08:42

ありがとうございます。やりたいことは画像の上にホバーすると中央から円が出現して画像の説明が出るようにしたいです（本当は円の中に説明文も入れたいのですが）。今起こってることはホバーすると円が増えていくのですが以下のようにしてみましたがやはり円が増えていってしまいます。 $(function(){ $(".my-works").hover(function(){ $(this).append('<div class="circle_1"></div>'); $(".circle_1").stop().fadeIn(300); },function(){ $(".circle_1").stop().fadeOut(); $(this).removeClass("circle_1"); }); });

行動規範の内容に同意します