アニメーションさせたいのですが１０００pxしか動きません。

Question

<div class="s"></div>

$(function() {
$('.s').click(function() {
$(this).stop()
.animate({
width: "1000px"
}).animate({
width: "500px"
})
});
});

メソッドチェーンを使って動かしたいのですが、幅が１０００pxになってから５００pxまで戻りません。
どのように変えれば動きますでしょうか。

Comments

[miyabi_pudding]

何点か。
・コードはコードブロックで記載ください。
<code>ボタンで出てくる、文字列の中に記載します。
・HTML内にJavaScriptを書くなら、<script>要素の記載を省略しないでください。
・CSSも記載してください。

質問は、編集ができるので、新規投稿などせず、この質問を編集して下さい。

[2KOH]

とりあえず試してみましたが、幅が1000pxになった後、500pxまで戻りましたよ？

[退会済みユーザー]

ありがとうございます。
確かめてみます。

Answer 1

$(function() {
  var p = 0;
  $('.s').click(function() {
    if(p%2===0){
      $(this).stop().animate({width: "1000px"}).animate({width: "500px"});
    } else {
      $(this).stop().animate({width: "500px"}).animate({width: "1000px"});
    }
    p++;
  });
});

サンプル

Comments

[miyabi_pudding]

クリック回数で処理を分けるとは・・・。toggleとかクラス付け替えとかより、お手軽ですね。
ナイスです。

[kyoya0819]

ありがとうございます。