複数のアクションを切り替えます

Question

私は多くのイベントのあるdivを持っています。私は2つのことを試しました：

1トグルの第2部分を条件付きで行います。それは動作しますが、応答が完璧ではない、秒の遅延があります。私はここでケースを簡略化しました：http://jsfiddle.net/T26vF/2/

2-then単純なトグルで試しました。私がオブジェクトをクリックすると、それは正常に動作します。しかし、ここでの問題は、私がトグルの最初の部分にいるときに、背景や他のオブジェクトをクリックして最初のオブジェクトに戻るときに、2回クリックする必要があるということです（最初のクリックでは、トグルの）。私はここの場合に簡略化：http://jsfiddle.net/T26vF/4/

$(function(){ 

    // THIS 
    $(".arrodonit").toggle(
     function(){ $(this).children("img").animate({"width":"411px","marginLeft": "-85px","marginTop": "-80px"}, 900); 
        $(this).siblings(".fons").fadeOut("slow"); 
        }, 

     function(){ $(this).children("img").animate({"width":"233px","marginLeft": "0px","marginTop": "0px"}, 900); 
        $(this).siblings(".fons").fadeIn("slow"); 
     } 
    ); 

    // NOT THIS 
    $(".arrodonit").click(function(e) { 
     e.stopPropagation(); 
     $('.arrodonit').not(this).siblings(".fons").fadeIn("slow"); 
     $('.arrodonit').not(this).children("img").stop().animate({ "width":"233px","marginLeft": "0px","marginTop": "0px",}, 900); 
     $(".mesInfo").fadeIn() 
     $(".info").fadeOut() 
    }); 

    // DOCUMENT 
    $(document).click(function() { 
     $('.fons').fadeIn(); 
     $('.arrodonit img').animate({ "width":"233px","marginLeft": "0px","marginTop": "0px"}, 900); 
    }); 

}) 

を私が尋ねる：
- 私のコードの何が問題になっているのですか？
- 最初のケースで条件付きにすると遅延が発生するのはなぜですか？
- なぜ2番目の例で2回クリックする必要がありますか？
- 同じ操作を行うより良い方法はありますか？

Answer 1

これでちょうどトリック、あなたはアニメーションイベントのシーケンスを持っているときstop().animate()を使用して 試みは、これはあなたの言うことは理にかなって