Question

我希望在鼠标移动时不会在2秒后发出菜单消失.animate（）。

可悲的是，它并没有像它应该的那样奏效。它输入if（通过console.log验证），但动画只是没有动画。

这里是代码

$(document).ready(function(){ var lastTimeMouseMoved;
$(document).mousemove(function(){
    $('#mod_logo_center').animate({top:'0'},1000);
    $(".fixed").animate({top:'0'}, 1000);
    $("#footer").animate({bottom:'0'}, 1000);
    lastTimeMouseMoved = new Date().getTime();
});
setInterval(function(){
     var currentTime = new Date().getTime();

    console.log(currentTime - lastTimeMouseMoved);
    if((currentTime - lastTimeMouseMoved) > 2000){
        $(".fixed").animate({top:'-62'}, 1000);
        $("#footer").animate({bottom:'-32'}, 1000);
        $('#mod_logo_center').animate({top:'-128'},1000);
}}, 2000);});

提前致谢

更新：

修复了一个布尔说法，如果它之前已经移动过，那么不执行.animate。但下面给出的答案也很好！

Answer 1

问题在于您的onmousemove事件。它会触发多个时间动画：

$(document).mousemove(function(){
    // happens like 126 time a second 
    $('#mod_logo_center').animate({top:'0'},1000);
    $(".fixed").animate({top:'0'}, 1000);
    $("#footer").animate({bottom:'0'}, 1000);
    lastTimeMouseMoved = new Date().getTime();
});

为防止出现这种情况，您可以使用.stop()来阻止以前的动画实际发生：

$(document).mousemove(function(){
    $('#mod_logo_center').stop().animate({top:'0'},1000);
    $(".fixed").stop().animate({top:'0'}, 1000);
    $("#footer").stop().animate({bottom:'0'}, 1000);
    lastTimeMouseMoved = new Date().getTime();
});

或者你可以在你想要的元素mouseenter等上使用更好的事件，例如hover ......

Answer 2

当验证if语句时，您需要清除时间间隔，否则这将在动画完成之前继续触发。可能那就是原因。试试这个让我知道..

var intrvl = setInterval(function(){
     var currentTime = new Date().getTime();
     console.log(currentTime - lastTimeMouseMoved);
     if((currentTime - lastTimeMouseMoved) > 2000){
        clearInterval(intrvl);
        $(".fixed").animate({'top':'-62'}, 1000);
        $("#footer").animate({'bottom':'-32'}, 1000);
        $('#mod_logo_center').animate({'top':'-128'},1000);
}}, 2000);});

Answer 3

我们没有看到你的HTML，所以很难告诉你什么是错的。但是如果你使用顶部和底部制作动画，你的控制需要是位置：绝对。如果他们没有为边距设置动画：

$(".fixed").animate({"margin-top":'-62px'}, 1000);

更新

试试这个。最后一次鼠标移动后检查2秒。

$(document).mousemove(function(){
    $('#mod_logo_center').animate({top:'0'},1000);
    $(".fixed").animate({top:'0'}, 1000);
    $("#footer").animate({bottom:'0'}, 1000);
    lastTimeMouseMoved = new Date().getTime();
    setTimeout(function(){
        var currentTime = new Date().getTime();

        console.log(currentTime - lastTimeMouseMoved);
        if((currentTime - lastTimeMouseMoved) > 2000){
            $(".fixed").animate({top:'-62'}, 1000);
            $("#footer").animate({bottom:'-32'}, 1000);
            $('#mod_logo_center').animate({top:'-128'},1000);
        }}, 2000);});
});

Jquery动画在timeOut（）中不起作用

3 个答案: