Переключить с несколькими действиями

Question

У меня есть div с большим количеством событий. Я пробовал две вещи:

1- Сделайте вторую часть переключателя с условным. Это работает, но ответ не идеальный, есть задержка секунды. Я упростил этот случай здесь: http://jsfiddle.net/T26vF/2/

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); 
    }); 

}) 

Я спрашиваю:
- Что случилось с моим кодом?
- Почему есть задержка, если я делаю условие в первом случае?
- Почему я должен дважды щелкнуть во втором примере?
- Есть ли лучший способ сделать те же действия?

Answer 1

Это просто трюк, попробовать использовать stop().animate() когда у вас есть последовательность анимации событий, это позволит сократить ваши задержки

Надеются, что это помогает