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 回答