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

我在这里看到了很多问题。首先，您必须将动作设置为显示或隐藏蒙版作为动画功能的回调。以下是首次加载页面时发生的情况：

如果用户悬停在上边栏上，请执行动画。
如果用户停止在顶部栏上悬停，请执行动画。
如果topbar的位置是-180px，则显示掩码。否则，隐藏它。

你真正想要的是：

如果用户在顶部栏上悬停，请执行动画。在动画结束时，隐藏面具。
如果用户停止在顶部栏上悬停，请执行动画。在动画结束时，显示面具。

因此，您需要在绑定事件或动画回调中有条件地隐藏或显示蒙版。有关设置回显到animate函数的更多信息，请查看以下内容：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();
    });
});

jQuery if语句和变量

3 个答案: