Question

所以我正在尝试对这个导航进行编码并让它全部正常工作，除非有时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);
    });

});

这是一个JFiddle：

http://jsfiddle.net/d8g4w/

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

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

Answer 1

了解这对您有何帮助：jsFiddle

马上，我注意到标记不是100％有效（锚标签作为ul节点的直接子节点）并且动画“浮动”属性对我来说感觉有点奇怪（我'我甚至不确定jQuery是否支持'float'的动画。我删除了一些跨浏览器的CSS声明（这似乎与动画没有任何关系）。你真的不需要锚标签，因为你使用CSS处理光标，并使用CSS和JS的组合来悬停。如果您需要通过鼠标点击触发（如果这是导航，我相信您会这样做）我推荐使用：

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

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

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

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

最大的改进可能是在.stop()之前注入.animate()方法。这似乎可以立即减少我所经历的抖动。就光滑性而言，FF仍然绝对是最弱的（我甚至不打算尝试使用IE浏览器，因为你提到了Safari和FF）但是我没有再看到打嗝。

JQuery动画凌乱

1 个答案: