我有两个链接,如果用户单击一个,与该链接相关的文章将显示在动画中。如果用户在单击第一个链接后和上一个动画完成之前单击另一个链接,则他们的动画将发生冲突.我想使用.bind()
和.unbind()
功能来防止用户在其他链接的事件正在工作时单击链接。但是当我取消绑定事件时,它不会在动画后绑定到元素。
JS代码:
$("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");
});
}
});
如果此问题有其他解决方案,请告知我。