So I am making a little quiz, with a I want to disable the click for everything inside #qWrap
while the animation is operating, thus preventing spamming clicks.
I tried to use .is(':animated')
but to no effect. Any ideas?
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();
});