I have two links that if a user click one,the article related to the link will be shown in an animation.if a user clicks another link after he/she clicked the first and before the previous animation is done,their animations will be conflicted.I want to use .bind()
and .unbind()
functions to prevent user from clicking a link while other link's event is working.but when I unbind an event,it won't bind to the element after animation.
JS Code:
$("a[href='#about-enamel']").click(function () {
$("a[href!='#about-enamel']").unbind("click");
if ($("article[id='about-enamel']").attr('class') === 'visible') {
$("a[href!='#about-enamel']").bind("click");
return 0;
}
else if ($("article[class='visible']").length) {
$("article[class='visible']").hide('drop', { easing: 'easeOutBack', direction: 'down' }, 500, function () {
$(this).attr('class', 'hidden');
$("article[id='about-enamel']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function () {
$(this).attr('class', 'visible');
$("a[href!='#about-enamel']").bind("click");
});
});
}
else {
$("article[id='about-enamel']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function () {
$(this).attr('class', 'visible');
$("a[href!='#about-enamel']").bind("click");
});
}
});
$("a[href='#order']").click(function () {
$("a[href!='#order']").unbind("click");
if ($("article[id='order']").attr('class') === 'visible') {
$("a[href!='#order']").bind("click");
return 0;
}
else if ($("article[class='visible']").length) {
$("article[class='visible']").hide('drop', { easing: 'easeOutBack', direction: 'down' }, 500, function () {
$(this).attr('class', 'hidden');
$("article[id='order']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function () {
$(this).attr('class', 'visible');
$("a[href!='#order']").bind("click");
});
});
}
else {
$("article[id='order']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function () {
$(this).attr('class', 'visible');
$("a[href!='#order']").bind("click");
});
}
});
If this problem has other solutions,please inform me.
Here's a basic example I've put together illustrating how to use stop()
to kill any in-progress animations, so you can start another without them conflicting.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.