jQuery 每个切换类之间的延迟

Question

我做了一个（相当复杂的）解决方案，我从侧面弹出了 4 个菜单项 in/out，我通过切换 class.

来实现这一点

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

效果很好，但客户现在希望它 "slide out"。我认为如果我可以在每次切换之间创建一个延迟，我可以让他开心，但我找不到一个好的方法来做到这一点。在实践中，我希望每个菜单项都 toggleClass 但在下一个 toggleClass 之前可能延迟 250ms。

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

Answer 1

怎么样：

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

请参阅 jQuery's delay() function 以获取更多参考。

Answer 2

考虑以下代码：

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

See it in action,在这个demo中我一个一个隐藏潜入，延迟1000ms

Answer 3

我会在单独的活动中进行 $('.menuitem').toggleClass('show')。

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

如果您切换 onmousedown 页面将在点击事件触发前使用切换呈现。

jQuery delay between each toggleclass