JQuery动画凌乱

因此，我正在尝试编写这个导航代码，并已使其全部正常工作，但有时如果您移动鼠标太快，JQuery动画会中断或跳动。在Safari中，它看起来也非常可怕，它似乎几乎会闪烁动画

$(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);
    });

});

这里有一把小提琴：

此外，还可以进行实时预览，以便您可以看到它的实际外观：

---

看看这对你有什么好处：

一开始，我就注意到标记不是100%有效的（锚定标记作为

ul

节点的直接子节点），设置“float”属性的动画对我来说有点奇怪（我甚至不确定jQuery是否支持“float”的动画）。我去掉了一些跨浏览器CSS声明（这似乎与动画没有任何关系）。您实际上不需要锚定标记，因为您使用CSS处理光标，使用CSS和JS组合处理悬停。如果您需要从鼠标点击触发（如果这是一个导航，我相信您会），我建议使用：

$（'#导航li'）。在（'click'，function（）{…}

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

.on（'mouseenter'，function（）{…}）

及

.on（'mouseleave'，function（）{…}）

因为它们更准确地代表了我通常试图瞄准的实际事件

---

可能最大的改进来自于在

.animate（）

之前注入

.stop（）

方法。这似乎可以立即减少我所经历的抖动。就平滑度而言，FF仍然是最差的（因为你提到了Safari和FF，所以我甚至没有尝试IE）但是我再也看不到打嗝了。

如果用户将鼠标悬停在打嗝上，然后快速地将鼠标悬停在上面多次，文本就会闪入闪出，有没有办法阻止打嗝。可能：）这是您希望用户参与的交互行为吗？