javascript - .bind() 和 .unbind() 无法正常工作

Question

我有两个链接，如果用户单击其中一个，则与该链接相关的文章将以动画形式显示。如果用户在单击第一个链接之后且在上一个动画完成之前单击另一个链接，则它们的动画会发生冲突。我想使用 .bind() 和 .unbind() 函数来防止用户在其他链接的事件正在运行时单击链接。但是当我取消绑定(bind)时一个事件，动画后不会绑定(bind)到元素。

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");
            });
        }
    });

如果这个问题有其他解决方案，请告诉我。

Answer 1

这是我整理的一个基本示例，说明如何使用 stop() 终止任何正在进行的动画，以便您可以启动另一个动画而不会发生冲突。

http://jsfiddle.net/zFAY9/3/