여러 작업으로 전환

Question

많은 이벤트가있는 div가 있습니다. 나는 두 가지를 시도했다.

1- 토글의 두 번째 부분을 조건부로 처리한다. 작동하지만 응답이 완벽하지는 않습니다. 지연 시간이 1 초입니다. 여기에서 사례를 단순화했습니다. http://jsfiddle.net/T26vF/2/

2-then 간단한 토글로 시도했습니다. 개체를 클릭하면 잘 작동합니다. 하지만 여기서 문제는 내가 토글의 첫 번째 부분에있을 때 배경이나 다른 객체를 클릭하여 두 번째 클릭해야하는 첫 번째 객체로 돌아올 때입니다. (첫 번째 클릭은 두 번째 부분을 계속 실행합니다. 토글). 여기 경우 단순화 : 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()를 사용 시도, 이것은 당신이 말하는 것은 의미가