jQuery : 애니메이션 도중 클릭을 해제합니다.

Question

애니메이션이 작동하는 동안 #qWrap 안에있는 모든 것을 클릭하지 못하게하여 스팸 클릭을 방지하기 위해 약간의 퀴즈를 만들고 있습니다. .is(':animated')을 사용해 보았지만 아무런 효과가 없었습니다. 어떤 아이디어?

HTML :

<div id="qWrap"> 
    <ul id="qBox"> 
     <!--Q1--> 
     <li id="q1" class="qContainer"> 
      <ul class="qAnswers"> 
       <li class="qQuestion"> 
        <h3>What are italics?</h3> 
       </li> 
       <li> 
        <a href="#q2" class="mums"> 
         <h3>Slanted cut of a type</h3> 
        </a> 
       </li> 
       <li> 
        <a href="#q2" class="such"> 
         <h3>A group of italian-designed typefaces</h3> 
        </a> 
       </li> 
       <li> 
        <a href="#q2" class="usch"> 
         <h3>An other word for the !-sign</h3> 
        </a> 
       </li> 
      </ul> 
     </li> 
     <!--Q2--> 
     <li id="q2" class="qContainer"> 
      <ul class="qAnswers"> 
       <li class="qQuestion"> 
        <h3>Who designed Comic Sans?</h3> 
       </li> 
       <li> 
        <a href="#q3" class="usch"> 
         <h3>Mathew Carter</h3> 
        </a> 
       </li> 
       <li> 
        <a href="#q3" class="usch"> 
         <h3>David Carson</h3> 
        </a> 
       </li> 
       <li> 
        <a href="#q3" class="mums"> 
         <h3>Vincent Connare</h3> 
        </a> 
       </li> 
      </ul> 
     </li> 
     <!--Q3--> 
     <li id="q3" class="qContainer"> 
      <ul class="qAnswers"> 
       <li class="qQuestion"> 
        <h3>What does Helvetica mean?</h3> 
       </li> 
       <li> 
        <a href="#q4" class="usch"> 
         <h3>From Austria</h3> 
        </a> 
       </li> 
       <li> 
        <a href="#q4" class="usch"> 
         <h3>From Germany</h3> 
        </a> 
       </li> 
       <li> 
        <a href="#q4" class="mums"> 
         <h3>From Switzerland</h3> 
        </a> 
       </li> 
      </ul> 
     </li> 
     </li> 
    </ul> 
</div> 

JS :

$('.qAnswers li a').bind('click', function(event) { 
    $(this).parent().addClass('selected'); 
    $(this).closest('.qAnswers').find("li:not(.selected, .qQuestion)").delay(200).addClass('notSelected'); 
    var $anchor = $(this); 

    //preventing click within #qWrap 
    if ($('#qWrap').is(':animated')) { 
     $('#qWrap').unbind('click'); 
    } 

    //firing the animation 
    $('#qWrap').stop(true, true).delay(800).animate({ 
     scrollLeft: $($anchor.attr('href')).position().left 
    }, 2000, function() { 
     nextCount(); 
    }); 
    stopTimer(); 
    addData(); 
    event.preventDefault(); 
}); 

Answer 1

귀하의 JS 코드는 다음과 같아야합니다

$('.qAnswers li a').bind('click', function(event) { 
    event.preventDefault(); 

    //preventing click within #qWrap 
    if ($('#qWrap').is(':animated')) { 
     return; 
    } 

    $(this).parent().addClass('selected'); 
    $(this).closest('.qAnswers').find("li:not(.selected, .qQuestion)").delay(200).addClass('notSelected'); 
    var $anchor = $(this); 


    //firing the animation 
    $('#qWrap').stop(true, true).delay(800).animate({ 
     scrollLeft: $($anchor.attr('href')).position().left 
    }, 2000, function() { 
     nextCount(); 
    }); 
    stopTimer(); 
    addData(); 
}); 

코드 $('#qWrap').is(':animated') 때 요소를 트리거 이벤트 아니다 애니메이션 효과가 있습니다. 정상적인 확인입니다. 귀하의 event.preventDefault();도 맨 위로 옮겼습니다. 당신이 그것을 원한다고 생각했다. 당신은 다른 것들도 돌아야 할 수도 있습니다.

Answer 2

$('[where you click]').click(
function(){ 
    if(!$('[what animates]').is(':animated')){ 
     $('[what animates]').[your_animation]; 
    } 
});