Question

所以我在页面顶部有一个菜单按钮，它用css做一些悬停动画：悬停。

$('.menu_button').click(function () {
                $(this).animate({
                    top: '-=50'
                }, 250);
                $('nav').delay(250).animate({
                    top: '+=50'
                }, 250);
                $('nav').mouseleave(function () {
                    $(this).delay(750).animate({
                        top: '-=50'
                    }, 250);
                    $('.menu_button').delay(1000).animate({
                        top: '+=50'
                    }, 250);
                });
            });

点击菜单按钮向上滑动，菜单向下滑动，就像小提琴一样。在mouseleave上，动画在750ms后反过来。

但如果你玩2到3次，菜单按钮的滑动比原来的位置要低得多。有时它会从顶部消失。不能说为什么以及何时发生这种情况当我没有点击但是在div内部的顶部正上方时，我可以复制这个故障。

任何想法或建议都错了吗？

小提琴： http://jsfiddle.net/dennym/c5D22/

问候 dennym

Answer 1

将导航动画移动到匿名回调函数中，并将top属性设置为具有px单位的绝对值：

$('.menu_button').click(function () {
    $(this).animate({
        top: '-50px'
    }, 250, function () {
        $('nav').animate({
            top: '50px'
        }, 250);
    });
});

$('nav').mouseleave(function () {
    $(this).delay(750).animate({
        top: '-50px'
    }, 250);
    $('.menu_button').delay(1000).animate({
        top: '-10px'
    }, 250);
});

工作示例：http://jsfiddle.net/c5D22/4/

关于jquery菜单脚本的Glitchy Animation

1 个答案: