.bind（）和.unbind（）无法正常工作

Question

我有两个链接，如果用户单击一个链接，则与该链接有关的文章将显示在动画中。如果用户在单击第一个链接之后且在完成上一个动画之前单击另一个链接，则它们的动画将发生冲突我想使用.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");
            });
        }
    });

如果此问题还有其他解决方法，请通知我。

Answer 1

这是我整理的一个基本示例，说明了如何使用stop()杀死进行中的动画，因此您可以在不冲突的情况下开始另一个动画。

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