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