jQuery .animate がおかしな動きをする

###前提・実現したいこと
実現したいこととしては、左に-1120px動いてほしい

###今回起こったこと
なぜか、一回目だけ -1120pxではなく、倍の2240px分動いてしまう。

html
1<div class="loop_slider">
2			<div class="mloop">
3				
4				<div class="mloop_set">
5					<ul class="display_os">
6						<li>
7							<div class="display_block_slider">
8								<div><img src="images/os_switch_stand.png" alt="スイッチスタンド"></div>
9								<div>
10									<a href="shop1.html">
11										任天堂スイッチ用スタンド<br>
12										￥4,980円
13									</a>
14								</div>
15							</div><!-- div .display_block_slider end -->
16						</li>
17						
18						<li>
19							<div class="display_block_slider">
20								<div><img src="images/os_switch_memory_card.png" alt="メモリーカード"></div>
21								<div>
22									<a href="shop1.html">
23										メモリーカード(32GB)<br>
24										￥4,980円
25									</a>
26								</div>
27							</div><!-- div .display_block_slider end -->
28						</li>
29
30						<li>
31							<div class="display_block_slider">
32								<div><img src="images/os_switch_car_charger.png" alt="カーチャージャ"></div>
33								<div>
34									<a href="shop1.html">
35										任天堂スイッチ用カーチャージャ<br>
36										￥2,980円
37									</a>
38								</div>
39							</div><!-- div .display_block_slider end -->
40						</li>
41						
42						<li>
43							<div class="display_block_slider">
44								<div><img src="images/os_splatoon1_game.png" alt="スプラトゥーン2"></div>
45								<div>
46									<a href="shop1.html">
47										任天堂スイッチ用ゲームスプラトゥーン2<br>
48										￥5,980円
49									</a>
50								</div>
51							</div><!-- div .display_block_slider end -->
52						</li>
53						
54						<li>
55							<div class="display_block_slider">
56								<div><img src="images/os_splatoon_case.png" alt="スプラトゥーン本体ケース"></div>
57								<div>
58									<a href="shop1.html">
59										スプラトゥーン本体ケース<br>
60										￥3,980円
61									</a>
62								</div>
63							</div><!-- div .display_block_slider end -->
64						</li>
65
66
67						
68					</ul>
69				</div>
70				
71				<div class="mloop_set">
72				
73					<ul class="display_os">
74						<li>
75							<div class="display_block_slider">
76								<div><img src="images/os_pro_con.png" alt="プロコンスプラトゥーンエディション"></div>
77								<div>
78									<a href="shop1.html">
79										プロコンスプラトゥーンエディション<br>
80										￥5,980円
81									</a>
82								</div>
83							</div><!-- div .display_block_slider end -->
84						</li>
85						
86						<li>
87							<div class="display_block_slider">
88								<div><img src="images/os_joy_con_strap.png" alt="ジョイコンストラップ(1)"></div>
89								<div>
90									<a href="shop1.html">
91										ジョイコンストラップ(1)<br>
92										￥798円
93									</a>
94								</div>
95							</div><!-- div .display_block_slider end -->
96						</li>
97
98						<li>
99							<div class="display_block_slider">
100								<div><img src="images/os_joy_con_lr.png" alt="ジョイコン(ライトブルー)"></div>
101								<div>
102									<a href="shop1.html">
103										ジョイコン(ライトブルー)<br>
104										￥7,980円
105									</a>
106								</div>
107							</div><!-- div .display_block_slider end -->
108						</li>
109						
110						<li>
111							<div class="display_block_slider">
112								<div><img src="images/os_joy_con_battele.png" alt="ジョイコンバッテリー"></div>
113								<div>
114									<a href="shop1.html">
115										ジョイコンバッテリー<br>
116										￥5,980円
117									</a>
118								</div>
119							</div><!-- div .display_block_slider end -->
120						</li>
121						
122						<li>
123							<div class="display_block_slider">
124								<div><img src="images/os_handle_contl.png" alt="ジョイコンハンドル"></div>
125								<div>
126									<a href="shop1.html">
127										ジョイコンハンドル<br>
128										￥4,980円
129									</a>
130								</div>
131							</div><!-- div .display_block_slider end -->
132						</li>
133
134
135						
136					</ul>
137
138					
139				</div>
140
141				
142			</div><!-- div .mloop end -->
143			
144			<div id="left_arrow2"><img src="images/left_arrow.png" alt="左矢印"></div>
145			<div id="right_arrow2"><img src="images/right_arrow.png" alt="右矢印"></div>
146
147			
148		</div><!-- div loop_slider end -->
149

CSS
1.loop_slider{
2	width:1120px;
3	height:250px;
4	overflow:hidden;
5	position:relative;
6}
7
8.mloop{
9	position:relative;
10	height:250px;
11}
12
13.mloop_set{
14	width:1120px;
15	height:250px;
16	float:left;
17}
18
19.display_block_slider{
20	width:150px;
21	height:250px;
22}
23
24.display_block_slider:first-child{
25	margin-left:40px;
26}
27
28.display_block_slider div a{
29	text-decoration:none;
30	font-size:14px;
31}
32
33.display_block_slider div a:link,.display_block_slider div a:visited{
34	color:#444;
35}
36
37.display_os li{
38	float: left;
39    width: 150px;
40    margin-left: 50px;
41}
42
43
44#left_arrow2{
45	position:absolute;
46	top:100px;
47	left:0px;
48	cursor:pointer;
49}
50
51#right_arrow2{
52	position:absolute;
53	top:100px;
54	right:0px;
55	cursor:pointer;
56}
57

###javascript

javascript
1$("#left_arrow2").click(function(){	
2		
3		
4		$(".mloop").animate({
5			left:'-=1120'
6		},{
7			compleat:function(){
8				alert("done");
9			}
10		});
11		
12		
13		doc_bk = $(".mloop_set:nth-child(1)").html();
14		
15		$(".mloop_set:nth-child(1)").remove();
16		
17		
18		
19		
20		/*
21		if(flg == 0){
22			$(".mloop").animate({
23				left:-1120
24			})
25			return;
26		}
27			
28		
29		$(".mloop_set:nth-child(1)").clone().appendTo(".mloop");
30		
31		$(".mloop").css({
32			left:0
33		})
34		
35		$(".mloop_set:nth-child(1)").remove();
36		
37		$(".mloop").animate({
38			left:-1120
39		})
40								
41		mloop_resize();
42		
43		flg += 1;
44		
45		*/
46		
47	
48	})
49
50
51

###jQueryのバージョン
jquery/2.1.4/jquery.min.js

退会済みユーザー

2017/09/05 01:46

HTMLのソースコードや、その要素に他のCSSプロパティが当たっているならCSSもご提示をお願いします。

kei344

2017/09/05 04:41

JavaScriptの記載が不完全なため、「2回目以降」がそもそもありません。こちらもご提示をお願いします。

yuyans

2017/09/05 04:44

追記させていただきました。ご指摘ありがとうございます。

kei344

2017/09/05 04:50

問題が再現しません。https://jsfiddle.net/mfda0g43/ JavaScriptの記載をもう少し提示してもらえませんか？

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

回答2件

ベストアンサー

提示されたコードの書き方では、現在の位置からleft: -1120pxまで移動するという命令になっています。
現在の位置から左に1120px移動したい、という場合は相対的に指定する必要がありますので、left: -=1120pxという書き方をする必要があります。
分かりにくいですが-（マイナス）の後ろに=（イコール）がついています。

【参考】
[jQuery]cssメソッドやanimateメソッドで相対的なピクセル値を指定する簡単な方法

【追記】
シングルクォーテーションで囲む必要がありました。申し訳ありません。

javascript
1$(".mloop").animate({
2    left: '-=1120px'
3});

投稿2017/09/05 01:50

編集2017/09/05 02:46

退会済みユーザー

総合スコア0

yuyans

2017/09/05 02:41

Uncaught SyntaxError: Unexpected token -= このようなエラーがでました... どうすればいいのでしょうか

退会済みユーザー

2017/09/05 02:46

失礼しました。追記しましたので、このようにシングルクォーテーションで囲ってみてください。

yuyans

2017/09/05 02:48

回答ありがとうございます。シングルクォーテションで囲ってみて動いたのですが、やはり、二倍分動いてしまいます。

退会済みユーザー

2017/09/05 02:55

.mloop の left の初期値は幾つですか？また、出来れば .mloop に適用されているCSSもご提示お願いします。

yuyans

2017/09/05 04:05

leftの初期値は、0だと思われます。

退会済みユーザー

2017/09/05 04:46

こちらの環境で試してみましたが、問題ないように感じます。「矢印」をクリックした時、スライダーが左に1120px動いて、画面外に消える。この挙動で合ってますか？

yuyans

2017/09/05 04:49

画面外に消えて表示真っ白になったらアウトです... 一度クリックしたら、-1120px動いて、コントローラーの画像が出てくるのが正解です。

退会済みユーザー

2017/09/05 04:55

$(".mloop_set:nth-child(1)").remove(); 上記のコードが問題な気がします。 removeされた要素の横幅は1120pxです。 animateで左に1120px動いた後、removeされた分の幅(1120px)が左に詰められますので、2240px動いてしまうように見えるのではないでしょうか？

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

言っている意味がやっとわかりました。

$(".mloop_set:nth-child(1)").remove(); を削除してください。
-1120px動かした上で1番目を削除したら当然2個目の要素としては-1120px-1120pxになります。

【開発者ツールを使おう！カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/

【第1回詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿2017/09/05 04:54

kei344

総合スコア69407

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

jQuery .animate がおかしな動きをする

関連した質問