JQuery show() 和 hide() 在同一个循环中

Question

我有下面一段代码，我需要显示或隐藏面板。我的问题是， show() 仅适用于替代点击。

var allPanels = $(".panel");
allPanels.hide(2000);
allPanels.show();

我想知道 show() 不能持续工作的原因。

Answer 1

这不起作用，因为您在 .hide(2000) 中设置了时间。您必须按以下方式编写::

HTML

<div class="panel" >This is a DIV</div>
<button type="button" class="buttonClick" >Click me</button>

JQUERY

$(document).ready(function (e) {
    $(document).on('click', '.buttonClick', function () {
        var allPanels = $(".panel");
        allPanels.hide(2000, function(){
            allPanels.show();
        });
    });
});

Answer 2

一种更简单的方法是 .stop() 当前动画，然后再开始另一个动画。

var allPanels = $(".panel");
allPanels.hide(2000);
allPanels.stop().show();

这样您就不必将代码放入回调中。不过请注意，这样做会显式暂停动画，而忽略其当前状态。

Answer 3

当我从

中删除动画时序

var allPanels = $(".panel");
allPanels.hide(2000);
allPanels.stop().show();

改为

var allPanels = $(".panel");
allPanels.hide();
allPanels.stop().show();`enter code here`

它开始工作了。隐藏和显示无缝工作。谢谢。但是谁能说为什么隐藏和显示定时不起作用。

JQuery show() 和 hide() 在同一个循环中

JQuery show() and hide() within the same loop

jquery

show-hide