每个toggleclass之间的jQuery延迟

Question

我做了一个（相当复杂的）解决方案，我从侧面弹出/弹出4个菜单项，我通过切换一个类来实现。

$('.menuitem').toggleClass('show');

它运作良好，但客户现在希望它“滑出”。我想如果我可以在每次切换之间创建一个延迟，我可以让他开心，但我找不到一个很好的方法来做到这一点。在实践中，我希望每个菜单项都是toggleClass，但是在下一个toggleClass之前延迟可能是250ms。

已编辑 - 显然延迟功能不适用于切换，仅适用于动画。

Answer 1

请考虑以下代码：

$('.menuitem').each(function(i) { 
    var elm=$(this);
    setTimeout(function() { 
        elm.toggleClass('show');
    }, i * 250); 
});

See it in action，在这个演示中，我一个接一个地隐藏潜水，延迟是1000毫秒。

Answer 2

怎么样：

$('.menuitem').toggleClass('show').delay(1000).toggleClass('hide');

有关详细信息，请参阅jQuery's delay() function。

Answer 3

我会在另一个事件中执行$('.menuitem').toggleClass('show')。

例如<button onmousedown="$('.menuitem').toggleClass('show');" onclick="myfunc();">Fast Toggle</button>

如果您点击onmousedown，则会在点击事件触发前使用切换进行渲染。