jQuery 2 애니메이션 다음에 하나씩

Question

페이지에 애니메이션 버튼 2 개가 있습니다. 사용자가 첫 번째 애니메이션을 클릭하면 애니메이션이 제자리에 고정됩니다. 그래서 애니메이션이 열리고 사용자가 페이지의 다른 부분을 클릭 할 때까지 거기에 머무르게됩니다. 그러나 사용자가 다른 애니메이션 트리거 버튼을 클릭 할 때 다른 애니메이션이 아직 켜져 있으면 모든 것이 엉망이되고 두 애니메이션이 동시에 이동합니다. (애니메이션에 닫는 애니메이션이 완료 될 때까지 다른 애니메이션을 어떻게 지연합니까? Jsfiddle : http://jsfiddle.net/hBb9L/17/

$("#e").click(function (e) { 
    //done 
    $("#re").animate({ 
     "margin-top": "104px" 
    }, 800); 
    $("#ret").animate({ 
     "margin-top": "104px" 
    }, 800); 
    $(".popu").animate({ 
     "margin-top": "-102px" 
    }, 800); 
    $("#s").show(200); 
    e.stopPropagation(); 

Answer 1

jQuery를 사용하면 사용할 수있는 animated 클래스가 귀하의 사례를 들어

"확인 문이 경우는 내부에 각 트리거/버튼 내에서 애니메이션의 컬렉션을 래핑 수 :. 애니메이션은 : "

if($("#re").is(':not(:animated)') && $("#ret").is(':not(:animated)')) { 
    ..... 
    ..... 
} 

is:animated 및 :not(:animated)에 대한 다른 스택 오버플로 응답이 있습니다. 애니메이션이 실행되는 동안 애니메이션 체크 한 후, 그것을 설정 : 완성도를 들어

$(document).ready(function() { 
    var inProgress = false; 
    $("#s").hide(0); 

$("#e").click(function (e) { 
    if(!inProgress) { 
     inProgress = true; 
     ..... 
    $("#s").show(200, function() { 
      // inProgress = false; 
     }); 
    } 
    }); 
    .... 

}); 

나는 포함했다

이 방법은 다소 복잡, 다른 솔루션은이 자리에 부울 변수를 생성하는 것입니다 두 가지 방법이 모두 추가 된 Updated Fiddle이 필요합니다. 또한 각 타일 위로 마우스를 가져 가면서 커서를 변경했습니다.

jquery stop()은 해당 요소에서 현재 실행중인 애니메이션을 중지하고 queue()은 솔루션을 적용 할 수 있습니다.