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/

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

1 个答案: