애니메이션을 적용하는 동안 요소를 클릭 취소 할 수 없게 만들기

Question

애니메이션을 적용 할 때 클릭 할 수없는 요소를 만들려고합니다. 애니메이션이 끝나면 다시 클릭 할 수 있기를 원합니다. 나는 이것을 달성하는 방법에 대한 도움을 얻기 위해 오랜 시간을 수색했지만, 제대로 작동하지 못하고 이유를 모른다.

html로 : 문자 A를 클릭하면

이

<p> 
    <span class="red" id="a">A</span><span id="llright" class="hide">llright</span> B C D 
</p> 

, 그것은 왼쪽으로 이동 한 후 일부 텍스트가 옆에 페이드.

JQuery와 :

(function() { 

var letterA = $('#a'), 
    llright = $('#llright'); 


$('#a:not(.open)').live('click', function() { 
    letterA.animate({ 
    marginRight: "5.7in", 
    }, 1300, function() { 
     letterA.addClass('open'); 
     llright.fadeIn(1300); // Animation complete. 
    }); 

}); 


$('#a.open').live('click', function() { 
    llright.fadeOut(700); 
    letterA.delay(700).animate({ 
    marginRight: "0.0in", 
    }, 700, function() { 
     letterA.removeClass('open'); 
    }); 

}); 


})(); 

애니메이션은 잘 작동하지만,이하지 않는 :

는

if(letterA.is(':animated')) { 
    letterA.unbind('click'); 
}; 

마지막 부분은 내가 간단한 경고를 삽입 할 경우에도 전혀 작동하지 않습니다 () unbind() 대신 A가 움직이는 지 아닌지를 알아내는 것 같지 않습니다.

나는 여기에서 약간의 도움을 사용할 수있다. 나는 내가 생각할 수있는 모든 것을 시도했다.

들으 /오스카

Answer 1

수표는 페이지로드에서 실행되고 있습니다. 클릭 기능 내부에서 수표를 확인하십시오.

$('#a:not(.open)').live('click', function() { 
    if(!letterA.is(':animated')) { 
     letterA.animate({ 
     marginRight: "5.7in", 
     }, 1300, function() { 
      letterA.addClass('open'); 
      llright.fadeIn(1300); // Animation complete. 
     }); 
    } 
}); 

또한 live()가 지원되지 않습니다. on()으로 이동하는 것을 고려하십시오.

Answer 2

다른 상황에 맞추기 위해 내부 브랜칭이있는 하나의 클릭 핸들러를 부착하는 것이 더 경제적입니다. 앞으로 애니메이션, 역 애니메이션을 선택하고 애니메이션이 진행되는 동안 거부 할 수 있습니다.

대신 llright 상태를 테스트하여 addClass/removeClass ('open') 없이도 빠져 나갈 수 있습니다. 그것을 어떻게해야이 같은

뭔가 : .live()를 사용하는

$('#a').on('click', function() { 
    var $this = $(this), 
     llright = $this.next("span"); 
    if($this.is(":animated") || llright.is(":animated")) { 
     return;//reject (no action) 
    } 
    if(llright.is(":visible")) { //reverse animation sequence 
     llright.fadeOut(700, function(){ 
      $this.animate({ 
       marginRight: 0, 
      }, 700); 
     }); 
    } 
    else { 
     $this.animate({ //forward animation sequence 
      marginRight: "5.7in", 
     }, 1300, function() { 
      llright.fadeIn(1300); 
     }); 
    } 
}); 

참고 또한이 코드가 필요하지 않습니다.