jQueryのアニメーション

Question

EDITベロー

にはどうすれば#contentBoxアニメーションの#westアニメーションコールをコーディングしますか？

基本的には、最初のアニメーションが完了した後にdivのcssをアニメーション化/変更し、別のdivのcssに切り替えるトグルボタンがあります。次にトグルが実行されたときに、そのトグルが実行されます。

何か助けていただければ幸いです。ありがとうございました。

条件文：

$("#menuToggle").click(
    function() { 

     var $west = $("#west"); 
     var $contentBox = $("#contentBox"); 

     $contentBox.animate({ 
       marginLeft : parseInt($contentBox 
         .css('marginLeft'), 10) == -320 
         ? $contentBox.outerWidth() 
         : -320 
     }); 

     $west.animate({ 
      left : parseInt($west 
       .css("left"), 10) == 0 
       ? -$west.outerWidth() 
       : 0 
     }); 
    }); 

私はあなたが常に一度execuiesのanimate（）メソッドへのコールバック関数を渡すことができる条件文

Answer 1

私はステートメントを書き直してしまいましたので、それはうまくいきませんでした。

$("#menuToggle").click(

     function() { 
      //var n = $("#west"); 
      var position = $("#west").offset(); 

      if (position.left == "0") { 
       $("#west").animate({"left" : "-=300px"}, "slow") 
       .animate({"width" : "1%"}, "fast", 
        function() { 
        $("#contentBox").animate({"width" : "98%"}, "normal"); 
       }); 
      } else { 
       $("#contentBox").animate({"width" : "70%"}, "normal", 
        function() { 
        $("#west").animate({"width" : "30%"}, "fast") 
        .animate({"left" : "+=300px"}, "slow"); 
       }); 
      } 
     }); 

Answer 2

をshorthandingアウトと古いfashoned道に行ってきましたアニメーションは完了です。

$("#menuToggle").click(
    function() { 

     var $west = $("#west"); 
     var $contentBox = $("#contentBox"); 

     $contentBox.animate({ 
       marginLeft : parseInt($contentBox 
         .css('marginLeft'), 10) == -320 
         ? $contentBox.outerWidth() 
         : -320 
     }, 5000, function() { 
      //this is the callback part 
      $west.animate({ 
       left : parseInt($west 
        .css("left"), 10) == 0 
        ? -$west.outerWidth() 
        : 0 
      }); 
     }); 

    }); 

Answer 3

コールバック機能は、この場合には動作するはずですが、あなたはすでに（例えば）10×10箱にアニメ化した場合に考慮すべき一つのことであり、あなたは、同じ10×10サイズにアニメーション化するjQueryのを頼む - jQueryのは、見ていますアニメーションはすでに完了しています。この場合、コールバックがすぐに実行されます。私はあなたの調整が必要かもしれないアニメーションのブロックを推測しています。私は、追加/クラスを削除するとクラスがあなたの状態を維持するためにチェックをお勧めします

http://jsfiddle.net/ufomammut66/YAVk4/

：あなたができる

ことの一つは、あなたのonClickイベントでこのようなものを2状態チェックを追加することです私はこの素早く汚れたXDを作った。