2つのリンクがあり、ユーザーが1つをクリックすると、そのリンクに関連する記事がアニメーションで表示されます。ユーザーが最初のリンクをクリックした後、前のアニメーションが完了する前に別のリンクをクリックすると、アニメーションが競合します。 。他のリンクのイベントが機能しているときにユーザーがリンクをクリックしないよう.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");
});
}
});
この問題に他の解決策がある場合は、お知らせください。