애니메이션이 완료 될 때까지 클릭 이벤트를 비활성화하는 방법은 무엇입니까?

Question

애니메이션이 완료 될 때까지 '클릭'이벤트를 비활성화하고 싶습니다.

마크 업이

<ul> 
    <li data-name="item1" class="nav">Item 1</li> 
    <li data-name="item2" class="nav">Item 2</li> 
</ul> 

은 여기 내 jQuery를 코드

$('.nav').live('click', function(){ 
    $('.nav').unbind('click'); 

    var itemId = $(this).data('name'); 

    if(itemId === 'item1') { 
     $('#item1').animate({ 
      'left' : '300' 
     }, 300, function(){ 
      $('.nav').bind('click'); 
     }); 
    } else if(itemId === 'item2') { 
     $('#item2').animate({ 
      'left' : '300' 
     }, 300, function(){ 
      $('.nav').bind('click'); 
     }); 
    } 
}); 

위의 코드가 작동하지 않는 것입니다. 어떻게 수정해야합니까? [항목 1의 애니메이션이 완료되기 전에 '항목 2'를 클릭하면 '항목 2'도 애니메이션으로 시작됩니다. 요소 중 하나가 animeted 경우 애니메이션 선택기 확인 : 난 당신이 사용할 수

Answer 1

.live()가 문서에 바인딩되므로 .bind를 사용하십시오.

$('.nav').bind('click', function(el, ev) { 
    clickme($(this), ev) 
}); 


function clickme(obj, ev) { 
    obj.unbind(ev); 
    console.log(obj.css('margin-left')); 
    var dest = 0; 
    if (obj.css('margin-left') == '0px') { 
     dest = '300'; 
    } 
    obj.animate({ 
     'margin-left': dest 
    }, 3000, function() { 
     obj.click(function() { 
      clickme(obj) 
     }) 

workig 샘플 : http://jsfiddle.net/oceog/CzkBu/

Answer 2

시간]에 하나의 애니메이션을 할 수 있도록하려는

$('.nav').live('click', function(){ 
    $('.nav').unbind('click'); 

    var itemId = $(this).data('name'); 
    var animated = $('.nav:animated').length; 
    if(itemId === 'item1' && animated === 0) { 
     $('#item1').animate({ 
      'left' : '300' 
     }, 300, function(){ 
      $('.nav').bind('click'); 
     }); 
    } else if(itemId === 'item2' && animated === 0) { 
     $('#item2').animate({ 
      'left' : '300' 
     }, 300, function(){ 
      $('.nav').bind('click'); 
     }); 
    } 
}); 

Answer 3

가 false로 부울을 설정할 수 있습니다 때 애니메이션이 재생 중이고 애니메이션이 끝나면 true로 설정됩니다. 클릭 핸들러에서 부울 값이 참이면 클릭에 대해 수행 할 작업을 수행하십시오.

Answer 4

이 내가 필요로하는 프로젝트 중 하나에 대한 내 코드입니다. 포인트는 처음에 몇 가지 변수를 만들고, 1을 말하고, u를 클릭하고, var가 1인지 확인한 다음, 애니메이션을 진행하고, 다음 라인에서 변수를 0 또는 1을 제외한 다른 것으로 설정하면, 애니메이션이 끝나면 다시 콜백 함수로 1로 설정합니다. 페이드 인/아웃이 필요했습니다. 어쨌든, 이것은 정말 간단한 방법입니다. .``$ 수 ('#;

var available = 1; 
    $('a.contact').click(function(){ 
     console.log(available); 
     if(available == 1) { 
      available = 0; 
      $('.red-arrow').fadeIn('slow', function(){ 
      $(this).delay(2800).fadeOut('slow', function(){ 
       available = 1; 
      }); 

     }); 
     } 

    }) 

Answer 5

당신이 시도 할 수 : : :

이

$(".nav").click(function(){ 
    if ($('#item').is(':animated')) 
    { 
     return false; 
    } 
    ... 
});