Question

凭借我有限的jQuery技能，我设法根据导航悬停移动导航滑块。但是我觉得我的代码不是最优的，并且在导航项之间快速移动时的延迟太长。（减少我的JavaScript中的延迟没有帮助）。有什么想法或建议吗？

$('#navTop .home').mouseover(function () {
 $('.navSlider').animate({
    marginLeft: '54px',
 }, 200, function () {
    // Animation complete.
 });
});
...

http://jsfiddle.net/wTcnV/

Answer 1

http://jsfiddle.net/mohammadAdil/wTcnV/1/

您需要像这样致电.stop() -

$('.navSlider').stop().animate({
        marginLeft: '54px',
    }, 300, function () {
        // Animation complete.
});

http://api.jquery.com/stop/

Answer 2

将LavaLamp插件用于此类效果

请参阅以下链接上的演示/代码

http://www.htmldrive.net/items/demo/439/LavaLamp-jQuery-Sliding-Menu

http://jquery.kvijayanand.in/jquery-navigation-hover-effects/index.html

jQuery导航滑块 - 延迟和优化

2 个答案: