Question

我正在将一个简单的菜单放入一个列表，其中包含第二个菜单中的每个项目。

ul.first li和ul.second li

菜单将在右侧滑动，因为网站左侧是菜单。

我是在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()方法。对于传入的参数，第一个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

您需要为JQuery使用hoverIntent插件。查看此演示：http://css-tricks.com/simple-jquery-dropdowns/

Answer 4

您只需在 .animate（）之前添加 .stop（），它就会阻止动画排队。

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

jQuery菜单向右滑动

4 个答案: