jQuery If 语句和变量

Question

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

目前的问题应该是变量（css top value）没有一直更新。

$('.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. 如果用户将鼠标悬停在顶栏上，则执行动画。
2. 如果用户停止将鼠标悬停在顶部栏上，则执行动画。
3. 如果顶栏的位置是-180px，则显示遮罩。否则，隐藏它。

您真正想要的是：

1. 如果用户将鼠标悬停在顶栏上，则执行动画。动画结束时，隐藏蒙版。
2. 如果用户停止将鼠标悬停在顶部栏上，则执行动画。动画结束时，展示面具。

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

我看到的另一个明显的错误是您当前在条件语句中将可见值设置为 -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();
    });
});