1

.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();
};

Load here は、スピナーを含む 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);
4

1 に答える 1

1

ステートメントを ajax リクエストのコールバックに移動する必要があります。$("#load").hide();これは、現在の方法では の直後にトリガーされるため$("#load").show();です。また、.delay()これはエフェクト用であり、コールバック用ではありません。setTimeout()代わりに通話を使用してください。

于 2012-07-18T15:06:54.587 に答える