JQuery动画凌乱

所以我试图编码这个导航，并得到它的所有工作，除了有时JQuery动画或者打破或者如果你太快地移动你的鼠标是跳动。在Safari中它看起来也非常可怕，它似乎几乎闪动了动画？JQuery动画凌乱

$(document).ready(function() { 

    // On hover: 
    $('#navigation li').hoverIntent(function() { 
     width = $(this).children('span:nth-child(2)').width(); 
     text = $(this).children('span:nth-child(2)');   

     var newwidth = (width + 15) // Original width + 15px padding   
     text.animate({"width":"0px"}, 0).show(); // Make the width 0px and make the element visible 
     text.animate({"width":+newwidth+"px"}, 300); // Animate the width to the new size 

    }, 
    function() { 
     text.animate({"width":"0px"}, 300); // Animate the width to 0px and hide the element 
     text.animate({"width":+width+"px","float":"left"}, 0); 
     setTimeout(function() { 
      text.hide(); 
     }, 300); 
    }); 

});

下面是它的一个JFiddle：

http://jsfiddle.net/d8g4w/

此外，实时预览，所以你可以看到它实际上是这样的：

http://dev.evaske.com/Navigation/

来源

2013-03-05 Tenatious

看看这样做对你：jsFiddle

马上我注意到这个标记并不是100％有效的（定位标记为ul节点的直接子节点），并且为'float'属性设置动画让我觉得有点奇怪（我甚至不确定jQuery支持'浮动'动画）。我删除了一些跨浏览器的CSS声明（这对于动画似乎没有任何影响）。你并不需要定位标记，因为你正在使用CSS处理光标，并且使用CSS和JS组合来悬停。如果你需要从一个鼠标点击（其中，如果这是一个导航，我敢肯定你会）触发我建议使用：

$('#navigation li').on('click', function(){...}

我倾向于）避免使用.hover（，而是更多地依赖在

.on('mouseenter', function(){...}) 和 .on('mouseleave', function(){...})

，因为它们更准确地反映实际的事件，我平时努力的目标。

可能最大的改进来自方法在.animate()之前注入。这似乎立即减少了我所经历的抖动。就平滑而言，FF仍然是最弱的（我甚至没有考虑过尝试IE，因为你提到了Safari和FF），但我没有再看到这种打嗝。

来源

2013-03-06 03:25:02

如果有人将鼠标悬停在其上，然后在文本闪烁进入和退出的过程中很快地将鼠标悬停在它上面，有没有办法阻止它？ – Tenatious 2013-03-06 11:00:02

也许吧。 :)这是你期望用户参与的那种交互行为吗？ – 2013-03-06 13:26:06

JQuery动画凌乱

回答

相关问题