这是Zi JsFiddle。为了复制我的问题,你必须将鼠标悬停在“javascript”链接上,然后将鼠标移开,然后鼠标返回。如果在动画完成之前执行此操作,粉红色滑动#subMenu
将在滑动中途冻结。有没有办法防止这种情况发生?我尝试了一些.stop()
,但我真的不希望每次鼠标进入或离开.navLink
时动画都会重新启动。动画应该从它停止的地方开始。换句话说,如果粉红色部分是中途向下,并且执行了slideDown(),则粉红色不应该消失,然后向下滑动,它应该从它的位置向下滑动。
谢谢!
JS:
$('header#subHeader').hide();
$('.navLink').hover(function () {
if ($(this).children('div').length > 0) {
var subMenu = $(this).find('.subMenu').html();
$('header#subHeader').empty().append('<div>' + subMenu + '</div>').stop().slideDown();
} else {
$('header#subHeader').stop().slideUp();
}
});
$('hgroup:first').on('mouseleave', function(){
$('header#subHeader').slideUp();
});
答案 0 :(得分:2)
使用stop(true, true)
来完成待处理的动画(跳到最后),这样你就不会受到中途影响。
$('header#subHeader').hide();
$('.navLink').hover(function () {
if ($(this).children('div').length > 0) {
var subMenu = $(this).find('.subMenu').html();
$('header#subHeader').empty().append('<div>' + subMenu + '</div>').stop(true, true).slideDown();
} else {
$('header#subHeader').stop(true, true).slideUp();
}
});
$('hgroup:first').on('mouseleave', function(){
$('header#subHeader').slideUp();
});
<强> Demo 强>
.stop([clearQueue] [,jumpToEnd])
clearQueue
Type: Boolean
A Boolean indicating whether to remove queued animation as well. Defaults to false.
jumpToEnd
Type: Boolean
A Boolean indicating whether to complete the current animation immediately. Defaults to false.
尝试animate
代替slide
高度以获得所需的效果,以便感觉恢复上下滑动动画:
var slideUpSettings = {
height: '0px'
};
var slideDownSettings = {
height: '20px'
};
$('.navLink').hover(function () {
var $header = $('header#subHeader');
if ($(this).children('div').length > 0) {
var subMenu = $(this).find('.subMenu').html();
$header.empty().append('<div>' + subMenu + '</div>').stop().animate(slideDownSettings, 500);
} else {
$header.stop().animate(slideUpSettings, 500);
}
});
$('#subHeader').on('mouseenter', function () {
$(this).stop().animate(slideDownSettings, 500);
});
$('hgroup:first').on('mouseleave', function () {
$('header#subHeader').stop().animate(slideUpSettings, 500);
});
<强> Demo 强>