jQuery：在動畫過程中禁用點擊

因此，我正在做一個小測驗，我想在動畫運行時禁用#qWrap內的所有內容的點擊，從而防止垃圾點擊。我試過使用.is(':animated')但沒有效果。有任何想法嗎？jQuery：在動畫過程中禁用點擊

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(); 
});

來源

2013-03-19 Carl Papworth

你能否提供一個這樣的jsfiddle鏈接，以便我們測試？ – 2013-03-19 08:04:36

http://jsfiddle.net/aHPfc/7/ 雖然我沒有得到它的完美工作：P – 2013-03-19 08:46:17

你的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();也搬到了頂端。無論如何你都想要這樣做。你可能還需要移動其他一些東西。

來源

2013-03-19 08:07:10 Znarkus

非常感謝您的清理，雖然 – 2013-03-19 08:21:00

@CarlPapworth沒有真正解決我的問題。嘗試[在Chrome中添加斷點]（https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints）查看發生了什麼。 – Znarkus 2013-03-19 08:39:44

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

來源

2015-05-13 10:45:55 danslap

jQuery：在動畫過程中禁用點擊

回答

相關問題