Javascriptで画像の拡大

初心者です。

8つ並べた画像を1秒毎に拡大するようコードを書きました。

8つの中のどれかにhoverした時に連続しているアニメーションを止めて
hoverしたものだけを拡大するようにしたいのですがどうしても出来ません。
(※画像拡大＝バブルアップのような効果です。)

ヒントだけでもいただけませんでしょうか…。
よろしくお願いします。

//追記↓-------------------------------------------------------------------------------------------

HTML部分は下記です。
かれこれ2日も悩んでいます。どうかよろしくお願いします。

退会済みユーザー

2015/08/22 18:59

おそらく提示されたコードより簡潔に書きなおすことができそうなので、HTML部分も提示してください。

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

回答2件

ざっくりこんな感じで…
一応コピペで動きます。

html
1<!DOCTYPE HTML>
2<html lang="ja-JP">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
7		<script type="text/javascript">
8			$(function () {
9				var interval = 1000;
10				var i = 0;
11				var $$ = $('.hoge');
12
13				var defaultProperty = {
14					height: "30px",
15					width: "40px"
16				};
17
18				var AnimatedProperty = {
19					height: "60px",
20					width: "80px"
21				};
22
23				var doAnimate = function (i) {
24					var len = $$.length;
25					var iterator = i % len;
26					$$.eq(iterator).find(".expand").animate(
27							AnimatedProperty,
28							function () {
29								$(this).animate(
30										defaultProperty
31										);
32							});
33				};
34
35				var toggleFx = function () {
36					$.fx.off = !$.fx.off;
37				};
38
39				setInterval(function () {
40					doAnimate(i);
41					i++;
42				}, interval);
43
44				$$.find(".expand").hover(
45						function () {
46							toggleFx();
47							$(this).animate(
48									AnimatedProperty
49									);
50						}, function () {
51					$(this).animate(
52							defaultProperty
53							);
54				});
55			});
56		</script>
57	</head>
58	<body>
59		<div id="imgGroup">
60			<div class="hoge">
61				<p class="imgCaption">□□□□</p>
62				<img class="expand" src="https://dummyimage.com/40x30/000/fff">
63				<img src="https://dummyimage.com/40x30/000/fff">
64			</div>
65			<div class="hoge">
66				<p class="imgCaption">□□□□</p>
67				<img class="expand" src="https://dummyimage.com/40x30/000/fff">
68				<img src="https://dummyimage.com/40x30/000/fff">
69			</div>
70			<div class="hoge">
71				<p class="imgCaption">□□□□</p>
72				<img class="expand" src="https://dummyimage.com/40x30/000/fff">
73				<img src="https://dummyimage.com/40x30/000/fff">
74			</div>
75			<div class="hoge">
76				<p class="imgCaption">□□□□</p>
77				<img class="expand" src="https://dummyimage.com/40x30/000/fff">
78				<img src="https://dummyimage.com/40x30/000/fff">
79			</div>
80			<div class="hoge">
81				<p class="imgCaption">□□□□</p>
82				<img class="expand" src="https://dummyimage.com/40x30/000/fff">
83				<img src="https://dummyimage.com/40x30/000/fff">
84			</div>
85		</div>
86	</body>
87</html>

投稿2015/08/23 17:22

編集2015/08/23 17:31

退会済みユーザー

総合スコア0

abradako

2015/08/24 11:27

ありがとうございます。参考にさせていただきます。

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

あまり美しく無いですが力技で
HTMLはそのまま(一部divの閉じタグが破損していたので修正)、javascriptは書かれていたものを関数化して、後はマウスオーバー時の処理を追加

JavaScript
1<script src="http://code.jquery.com/jquery-latest.js"></script>
2<div id="imgGroup"> 
3    <div class="hoge"><div id="caption0"><p class="imgCaption">□□□□</p></div><img src="images/0.png" id="img0"><img src="images/0Txt.png"></div> 
4    <div class="hoge"><div id="caption1"><p class="imgCaption">□□□□</p></div><img src="images/1.png" id="img1"><img src="images/1Txt.png"></div> 
5    <div class="hoge"><div id="caption2"><p class="imgCaption">□□□□</p></div><img src="images/2.png" id="img2"><img src="images/2Txt.png"></div> 
6    <div class="hoge"><div id="caption3"><p class="imgCaption">□□□□</p></div><img src="images/3.png" id="img3"><img src="images/3Txt.png"></div> 
7    <div class="hoge"><div id="caption4"><p class="imgCaption">□□□□</p></div><img src="images/4.png" id="img4"><img src="images/4Txt.png"></div> 
8    <div class="hoge"><div id="caption5"><p class="imgCaption">□□□□</p></div><img src="images/5.png" id="img5"><img src="images/5Txt.png"></div> 
9    <div class="hoge"><div id="caption6"><p class="imgCaption">□□□□</p></div><img src="images/6.png" id="img6"><img src="images/6Txt.png"></div> 
10    <div class="hoge"><div id="caption7"><p class="imgCaption">□□□□</p></div><img src="images/7.png" id="img7"><img src="images/7Txt.png"></div> 
11</div> 
12<script>
13function startLoop(){
14	count = 0; 
15	interval   = 1000; 
16	loopAnime = setInterval(function(){ 
17	    $("#img" + count).animate({ 
18	        height: "30px", 
19	        width: "40px", 
20	    }, function(){ 
21	        $("#img" + count).animate({ 
22	            height: "60px", 
23	            width: "80px", 
24	           }) 
25	    }); 
26	    $('#caption' + count).animate({ 
27	        opacity: '0', 
28	    }, function(){ 
29	        $('#caption' + count).animate({ 
30	            opacity: '1', 
31	        }); 
32	    }); 
33	    count++; 
34	    if(count > 7){  
35	        count = 0; 
36	    } 
37	}, interval);
38}
39function stopLoop(){
40	clearInterval(loopAnime);
41	$(".hoge img").queue([]);
42	$(".hoge img").stop();
43	$(".hoge div").queue([]);
44	$(".hoge div").stop();
45}
46
47$(".hoge img:even").on('mouseenter',function(){
48		stopLoop();
49		trg = $(this).prev("div");
50		$(".hoge img").not(this).animate({ 
51	        height: "30px", 
52	        width: "40px", 
53	    });
54	    $(".hoge div").not(trg).animate({ 
55            opacity: '1',
56        }); 
57	    $(this).animate({
58	    	height: "60px", 
59	    	width: "80px", 
60	    });
61	    $(trg).animate({ 
62            opacity: '0',
63        }); 
64});
65
66startLoop();
67</script>