所以我正在做一个小测验,我想在动画运行时禁用 #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();
});
最佳答案
你的 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();
移至顶部;我想无论如何你都想这么做。您可能还需要移动其他一些东西。
关于javascript - jQuery:在动画期间禁用单击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15494164/