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);
                });
            });

点击菜单按钮向上滑动，菜单像小提琴一样向下滑动。在 mouseleave 上，动画在 750 毫秒后以相反的方式继续。

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

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

小提琴：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/