jQueryを使用して2つのサイズを切り替えることができますか？

Question

基本的には、最初は60x60に設定された小さなdivがあります。私は誰かが再びdiv要素をクリックした場合は、このアニメーションを逆にしたいと思います

$("#myDiv").click(function() { 
    $(this).animate(
    { 
     width: "350px", 
     height: "300px" 
    }, 500); 
} 

：私はdiv要素の拡張をアニメーション化し、クリックイベントを作成しました。とにかく、各クリックで元のサイズと拡張サイズ（まだアニメーション機能を使用しています）を切り替えることはできますか？

私はtoggleClass関数を見つけましたが、これはanimiateではうまくいかないと思います。 http://jsfiddle.net/NS9Qp/

Answer 1

$("#myDiv").toggle(function() { 
    $(this).stop().animate({ 
     width: "350px", 
     height: "300px" 
    }, 500); 
}, function() { 
    $(this).stop().animate({ 
     width: "60px", 
     height: "60px" 
    }, 500); 
}); 

Example：

現在地基本的なフィドルを見ることができます。

jQuery toggle()関数を使用すると、各マウスクリックで循環する2つ以上の関数を定義できます。この場合、最初のクリックでトリガーされた最初のものはdivを展開し、2番目のクリックでトリガーされた2番目のものはそれをリセットします。 3回目のクリックで、最初のクリックから開始されます。

詳細toggle()here

Answer 2

私がこのような場合に行うことは、変換配列を格納することです。

var transforms = { 'height0': 60, 'width0': 60, 'height1': 300, 'width1': 350}; 

次に、0または1の間のトグルを保存し、対応する値をアニメーションに使用します。

EDIT：これを前のトグルの例と組み合わせれば、実用的な解決策が得られます。

Answer 3

CSSスタイルをハードコードしないでください（私の例では、myDiv要素にインラインCSSを使用し、これをCSSファイルに入れます）。

<div id="myDiv" style="background:red; width: 60px; height: 60px;"></div> 

<script type="text/javascript"> 
    var div = $('#myDiv'); 
    div 
     .attr('defWidth', div.width()) 
     .attr('defHeight', div.height()) 
     .toggle(function() { 
       $(this).stop().animate({width: "350px", height: "300px"}, 500); 
      }, function() { 
       $(this).stop().animate({width: $(this).attr('defWidth'), height: $(this).attr('defHeight')}, 500); 
      } 
     ); 
</script> 

Answer 4

だけ異なるようにする：

var size=[]; 
$("#cornerBox").click(function(){ 
    $(this).width() >= 350 ? size=[60, 60] : size=[350, 300]; 
    $(this).stop().animate({ width: size[0], height: size[1] },500); 
}); 

フィドル：http://jsfiddle.net/NS9Qp/1/

Answer 5

私はjQueryのUIのアニメーションtoggleClass効果を使用して終了：http://jqueryui.com/demos/toggleClass/

超簡単なコード：

$('h2').click(function() { 
    $(this).next().toggleClass("hidden", 1000); 
});