所以我在页面顶部有一个菜单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/