所以我在页面顶部有一个菜单botton,它使用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时,但是在div内部顶部的正上方,我可以复制故障。

有什么想法或建议出什么事吗?

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

问候
ny

最佳答案

将导航动画移动到匿名回调函数中,并将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/

08-03 14:54
查看更多