0

因此，我正在尝试编写此导航代码并使其全部正常工作，只是有时如果您移动鼠标过快，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/

4

1 回答 1

0

看看这对你有什么作用：jsFiddle

马上，我注意到标记不是 100% 有效（将标记作为节点的直接子ul节点），并且动画“浮动”属性对我来说有点奇怪（我什至不确定 jQuery 是否支持'漂浮'）。我去掉了一些跨浏览器的 CSS 声明（这似乎与动画没有任何关系）。您实际上并不需要锚标记，因为您使用 CSS 处理光标，并使用 CSS 和 JS 的组合处理悬停。如果您需要从鼠标点击触发（如果这是导航，我相信您会这样做）我建议使用：

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

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

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

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

可能最大的改进来自于.stop()在.animate(). 这似乎立即减少了我所经历的抖动。就平滑度而言，FF 绝对是最弱的（我什至没有尝试 IE，因为您提到了 Safari 和 FF），但我不再看到打嗝了。

于 2013-03-06T03:25:02.777 回答