jQuery 显示和隐藏 div答案

【问题标题】：Jquery show and hide divjQuery 显示和隐藏 div
【发布时间】：2026-01-24 09:10:01
【问题描述】：

我有3个div如下

<div id="div1"></div>
<div id="spinnerDiv" style="display:none"></div>
<div id="div2" style="display:none"></div>

单击按钮时，我想按以下方式显示 div

第 1 步：隐藏 div1
第 2 步：显示 spinnerdiv 几毫秒，例如 3000
第 3 步：隐藏 spinnerdiv 并显示 div2

我尝试了以下方法，但它不能正常工作：

button click function(){
    $("#div1").hide();
    $("#spinnerDiv").show().delay(3000).queue(function () {
        $(this).hide();
        $("#div2").show();
    });
}

【问题讨论】：

您的代码运行良好，请使用 sn-p 检查我的答案
你是对的。只是因为我这边的一些错误而弄错了。以任何方式接受使用上述以外的不同方法的答案

标签： jquery

【解决方案1】：

试试setTimeout:

$("#div1").hide();
$("#spinnerDiv").show();
setTimeout(function() {
    $("#spinnerDiv").hide();
    $("#div2").show();
}, 3000);

【讨论】：

【解决方案2】：

您是否尝试过改用setTimeout？

button click function(){
     $("#div1").hide();
     $("#spinnerDiv").show();

     setTimeout(function () {
        $('#spinnerDiv').hide();
        $("#div2").show();
     }, 3000);

}

【讨论】：

【解决方案3】：

尝试在函数的第一部分使用回调而不是 hide()，因为我不喜欢延迟，所以我会使用 setTimeout：

$("button").click(function(){
    $("#div1").fadeOut(1, function () {
        var s = $("#spinnerDiv");
        s.show();
        setTimeout(function () {
            s.hide();
            $("#div2").show();
        }, 3000);
    });
}

【讨论】：

【解决方案4】：

你来了

function thisAction(){
     $("#div1").hide();
     $("#spinnerDiv").hide();
      $("#div2").hide();
     
     $("#spinnerDiv").show().delay(3000).queue(function () {
                $(this).hide();
                $("#div2").show();
            });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="div1">div 1</div>
 <div id="spinnerDiv" style="display:none"> spinnerDiv</div>
 <div id="div2" style="display:none">div2</div>

<button onclick='thisAction()' >

【讨论】：

这里请在动画效果后再次点击按钮。