jquery - jquery 菜单脚本上的故障动画

Question

所以我在页面顶部有一个菜单按钮，它用 css :hover 做了一个小的悬停动画。

$('.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);
                });
            });

点击菜单按钮向上滑动，菜单像 fiddle 一样向下滑动。 在鼠标离开时，动画会在 750 毫秒后以相反的方式进行。

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

任何想法或建议有什么问题吗？

fiddle : http://jsfiddle.net/dennym/c5D22/

问候 丹尼姆

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/