Question

我的代码遇到了一个小问题，无法找到解决方法。在我的页面中有一个顶部栏，其中包含链接（主页，关于，注册），每个链接都拥有自己的内容。假设用户当前正在查看“主页”内容，然后他点击“关于”，页面应隐藏“主页”内容，然后显示“关于”内容。

但是我注意到如果你在内容动画时点击另一个链接有一个错误，所以我创建了一个名为AllowLinkSwitch的变量来阻止用户切换到另一个链接，如果还有一个动画正在进行

this.ContentHideThenShow = function(contentHide, contentShow, contentShowHeight) 
{
    this.AllowLinkSwitch = false;
    $(contentHide).animate({
        height: "0px"
    }, 300, function(){
        $(contentHide).hide();
        $(contentShow).show();
        $(contentShow).animate({
            height: contentShowHeight
        }, 300, function(){ this.AllowLinkSwitch = true; });
    });
}

首先，我在调用函数时将AllowLinkSwitch设置为false，然后在动画结束时将其设置为true，但变量永远不会重新设置为true并且我无法切换到其他链接，上面的代码只有在我将this.AllowLinkSwitch = true;行放在animate函数之外时才有效，但是我不希望它像那样工作，因为那个bug仍然会发生，我需要一旦动画结束，该变量将设置为true，有人可以帮忙吗？

Answer 1

在animate()回调中，this与外部对象的引用不同。您需要在该函数之外存储引用。试试这个：

this.ContentHideThenShow = function(contentHide, contentShow, contentShowHeight) {
    var _this = this; // store reference here
    _this.AllowLinkSwitch = false;
    $(contentHide).animate({
        height: "0px"
    }, 300, function() {
        $(contentHide).hide();
        $(contentShow).show().animate({
            height: contentShowHeight
        }, 300, function(){ 
            _this.AllowLinkSwitch = true;  // use here
        });
    });
}

或者，您可以完全避免使用动画状态标志，方法是使用if (!$(contentShow).is(':animated'))检查元素当前是否为动画，并防止在代码中需要的位置发生逻辑。

Answer 2

您的this.AllowLinkSwitch变量已设置为true，但仅在功能范围内，您应使用全局变量。

动画时阻止链接切换

2 个答案: