jQuery If语句和变量

Question

基本上，我有一个顶部的工具栏，当鼠标悬停在上面时可以向下滚动。我添加了一个顶部遮罩层，使其更暗。我希望当css top值为=-180时，顶部蒙版可见。

当前的问题应该是变量(css top值)没有一直更新。

$('.topmask').hover(function () {
    $('.topbar').stop().animate({"top":"0px"});
    visible1 = $('.topbar').css('top');
});

$('.topbar').mouseleave(function () {
    $(this).stop().animate({"top":"-180px"});
});

var visible1 = $('.topbar').css('top');;console.log(visible1);
var visible = parseFloat(visible1); 

if (visible = -180) {
    $('.topmask').show();
} else {
    $('.topmask').hide();
}

这里有一个JSfiddle的链接，我很快就做了，以更好地演示这个问题，因为我显然不善于解释。http://jsfiddle.net/Fregos/DyrK5/

Answer 1

动画是异步执行的，所以当您计算top时，动画还没有完成。如何根据动画完成后激发的回调来显示和隐藏顶部栏？

$('.topmask').hover(function () {
    $('.topbar').stop().animate({"top":"0px"}, function() {
        $('.topmask').hide('fade');
    });
});

$('.topbar').mouseleave(function () {
    $(this).stop().animate({"top":"-180px"}, function() {
        $('.topmask').show('fade');
    });
});

http://jsfiddle.net/DyrK5/1/的工作示例。

Answer 2

我在这里看到了不少问题。首先，也是最重要的，必须将操作设置为显示或隐藏掩码作为动画函数的回调。下面是第一次加载页面时会发生的情况：

1. 如果用户悬停在topbar上，则执行动画。
2. 如果用户停止悬停在topbar上，则执行动画。
3. 如果topbar的位置为-180px，则显示蒙版。否则，将其隐藏。

你真正想要的是：

1. 如果用户悬停在topbar上，则执行动画。在动画结束时，隐藏遮罩。
2. 如果用户停止在顶部栏上悬停，则执行动画。在动画结束时，显示蒙版。

因此，您需要在绑定事件或动画回调中有条件地隐藏或显示掩码。有关设置动画函数的回调的更多信息，请查看以下内容：http://api.jquery.com/animate/

我看到的另一个明显的错误是，您当前在条件语句中将visible的值设置为-180。

if (visible = -180) { ... }

与以下内容不同：

if (visible == -180) { ... }

Answer 3

为什么不干脆这样做：

$('.topmask').hover(function () {
    $('.topbar').stop().animate({"top":"0px"});
    $('.topmask').hide();
});
$('.topbar').mouseleave(function () {
    $(this).stop().animate({"top":"-180px"}, function() {
        $('.topmask').show();
    });
});