Question

我有以下HTML，CSS和Javascript：

HTML

<p id="loading">Loading...</p>
<div id="my-box"></div>
<input type="button" id="my-button" value="Click" />

CSS

#loading {
    display: none;
}

的Javascript

$("#my-button").click( function() {

    $.ajax({
        type: 'POST',
        url: '/echo/html/',
        data: {html: "<p>Text echoed back to request</p>"},
        delay: 0,

        beforeSend: function(xhr) {

            $('#loading').fadeIn('fast', function() {
                $('#my-box').fadeOut();
            });

        },

        success: function(html){

            $('#my-box').stop(true, true).html(html).fadeIn('slow', function(){
                $("#loading").fadeOut("fast");
            });
        }
    });
});

这里有一个JSFiddle here。

问题是如果ajax调用执行的时间少于200ms，fadeOut（）会覆盖fadeIn（），而#my-box会变得不可见而不是可见。

我没有看到导致这种情况的原因。任何帮助都将非常受欢迎。

Answer 1

您应该在成功中使用相同的序列fadeOut()和fadeIn()

success: function (html) {
    $('#loading').fadeOut('fast', function () {
        $('#my-box').html(html).fadeIn();
    });
}

DEMO

如果Ajax调用时间少于200ms，jQuery fadeOut（）会覆盖fadeIn（）

1 个答案: