Question

我有以下函数检索.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);

Answer 1

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

JQuery - Div与spinner不会显示

解决方案：

1 个答案: