JQuery - 带有微调器的 Div 不会显示答案

【问题标题】：JQuery - Div with spinner wont showJQuery - 带有微调器的 Div 不会显示
【发布时间】：2012-07-18 14:53:14
【问题描述】：

我有以下函数，它检索 .php 文件的内容并将其显示在 div 中。检索部分效果很好，但我想展示一个微调器，例如1 秒。

这是我的 JQuery 函数：

function f(par){
$("#load").show();
$.ajax({url: par + ".php",
success: function(result){
    $("#info").html(result);
    $("#info").css("top", Math.max(0, (($(window).height() - $("#info").outerHeight()) / 2) + $(window).scrollTop()) + "px");
    $("#info").css("left", Math.max(0, (($(window).width() - $("#info").outerWidth()) / 2) +   $(window).scrollLeft()) + "px");
    $("#info").delay(1000).show(0);
    }});
$("#load").hide();
};

这里加载的是带有微调器的 div，信息显示良好.. 检索到的信息！主要计划是延迟（因为检索根本不需要时间）show(0) 函数，让微调器运行至少 1 秒。

css如下（来自How can I create a "Please Wait, Loading..." animation using jQuery?）：

#load {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://sampsonresume.com/labs/pIkfp.gif')
                50% 50% 
                no-repeat;
}

#info{
display: none;
position: fixed;
z-index: 500;
height: 40%;
width: 60%;
overflow: auto;
background: rgba(0, 190, 0, .8);
}

我也尝试过使用 $(this).addClass("load");但这也没有用。

出了什么问题？

解决方案：

（对于有兴趣的人）感谢 j08691，解决方案非常简单：

setTimeout(function() {
        $("#info").show();
        $("#load").hide();
    }, 1500);

【问题讨论】：

如果你注释掉$("#load").hide();会发生什么？
O_O 好的，微调器现在自己显示了，所以延迟部分肯定有问题，因为 .hide() 在 .show() 之后立即触发
您的隐藏发生在演出之后，因为它不在 ajax 回调中。
我之前在 ajax 部分有它，就在 delay(1000) 部分之后。但这并没有奏效。
.delay() 用于效果，而不是回调。改用 setTimeout 来创建延迟。

标签： jquery delay

【解决方案1】：

您需要将$("#load").hide(); 语句移动到ajax 请求的回调中，因为它现在的方式将在$("#load").show(); 之后立即触发它。此外，.delay() 用于效果而不是回调。请改用setTimeout() 调用。

【讨论】：