jQuery菜单滑动右键

Question

我正在做一个简单的菜单进入一个列表，每个菜单里面的每一个项目。

ul.first li和ul.second li

菜单将在右侧becouse滑动是在网站左侧的菜单。

我写了这个jQuery的：

var secs1 = $('ul.first > li'); 

secs1.hover(

    function() { 
     $(this).find('ul.second').animate({ width: 'toggle' }, 500); 
    }, 
    function() { 
     $(this).find('ul.second').animate({ width: 'toggle' }, 250); 
    } 

); 

它可以完美的，但里面有一个问题！

如果我做鼠标输入并将鼠标移出到单个元素上，它会像我一样打开和关闭很多次。

这是我想要解决的第一个想法！

二是：

如果我的鼠标输入和鼠标进行切换完成后，我想，它不完成切换一切，但停下来做到这一点，并开始切换回到原点了。

我希望一切都足够清晰，为您提供帮助！

谢谢！

编辑：

看到它在Fiddle

Answer 1

这里是正确的代码。测试，整理和工作。请享用！

http://jsfiddle.net/ReuLr/6/

Answer 2

您正在寻找的.stop()方法。对于传入的PARAMATERS，第一true清除动画队列，而第二false停止，无论你是在动画持续的，而不是跳跃到动画结束前：

var secs1 = $('ul.first > li'); 

secs1.hover(

    function() { 
     $(this).find('ul.second').stop(true, false).animate({width:'toggle'}, 500); 
    }, 
    function() { 
     $(this).find('ul.second').stop(true, false).animate({width:'toggle'}, 250); 
    } 

); 

Answer 3

您需要使用hoverIntent插件JQuery的。检查这个演示：http://css-tricks.com/simple-jquery-dropdowns/

Answer 4

你只需要添加一个.stop（）之前.animate（），它会阻止动画排队。

$('ul.first > li').find('ul.second').hover(
    function() { 
     $(this).stop().animate({ width: 'toggle' }, 500); 
    },function() { 
     $(this).stop().animate({ width: 'toggle' }, 250); 
    } 
);