如何为我的菜单创建平滑的动画
How to create a smooth animation for my menu?
我有一个菜单,可以扩展为"悬停时",但问题是,如果我悬停在一个项目上,并且该项目正在运行动画,则下一个项目动画将不平滑(基本上子菜单将显示在动画中间)。
我已经创建了一个JS Fiddle的问题。
我认为我的代码的这一部分导致了问题:
j('.active').next('ul')
.removeClass('sub-menu')
.addClass('jsub-menu').css({
'visibility':'',
'opacity':'',
'height':get_height_of_first_child +'px',
'width':'0'
});
j('.active').next('.jsub-menu').animate({width:get_width},2000);
j('.active').next('.jsub-menu').animate({height:get_submenu_height},2000);
编辑:这是最新的Fiddle代码。如果你仔细看59
行,我已经添加了这个代码
if(j('.active').next('.jsub-menu').is(':animated')){
j('.active').next('.jsub-menu').hide();
}
现在,如果你将鼠标悬停在"在我展开时悬停我!"上,并且该菜单已设置动画,它将隐藏菜单(不要这样,但请耐心等待)。
因此,现在尝试将鼠标悬停在"悬停我"上,等待4-5秒和然后将鼠标悬停于"悬停在我展开时!"您将看到下一个菜单的动画效果流畅。
这是我想要的效果,但显然我不想在这个过程中隐藏菜单。
以下是我的操作方法。它检查它是否是父.jnav
的直接子菜单,如果是,则使用slideDown
。否则,它会获得宽度(而元素具有visibility:hidden
),并在后将其动画化为该宽度
var j = jQuery.noConflict();
j(document).ready(function () {
j('ul.nav').removeClass('nav').addClass('jnav');
j('ul.jnav li').hover(function () {
if (j(this).children('ul:first').hasClass('jsub-menu')) {
return false;
} else {
if(j('ul.jnav > li').is(this)) {
j(this).find('ul.sub-menu:first').not(':animated').slideDown(500);
} else {
var elem = j(this).find('ul.sub-menu:first').not(':animated');
elem.css({
visibility: 'hidden',
display: 'block'
});
var elemWidth = elem.width();
console.log(elemWidth);
elem.css({
width: '0px',
visibility: 'visible'
}).animate({
width: elemWidth
});
}
}
}, function () {
j(this).find('ul:first').slideUp(500, function () {
j(this).removeClass('jsub-menu').addClass('sub-menu');
});
});
});
更新的jsFiddle
相关文章:
- 如何正确编程jQuery动画与平滑(导航栏)
- 如何平滑地设置twitter引导程序进度条的动画
- jQuery-slideToggle动画不平滑
- 图像动画不平滑
- 在一定百分比上禁用引导进度条的平滑动画过渡
- jQuery:滚动时平滑动画字体大小变化
- jQuery设置的边距顶部使内容跳跃.如何使其平滑动画化
- 如何通过requestAnimationFrame平滑动画
- 请帮助使用加速度计 JavaScript 读取平滑动画
- 基于滑块值的平滑动画
- 如何创建朝向目标的平滑动画
- 饼图标签的平滑动画
- 如何滚动到一个锚点与平滑动画土坯边缘
- 平滑动画背景颜色不透明度后,基础图像加载
- 平滑动画在kinetic.js (html5 canvas)
- javascript平滑动画从X,Y到X1,Y1
- CSS和jQuery模拟时钟-平滑动画
- HTML部分的平滑动画
- 列表视图内部可折叠面板的平滑动画
- 平滑动画在HTML5画布