jquery - jQuery 导航滑块 - 延迟和优化

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