Javascript JQuery淡出不适用于ajax post请求

我有这个JQuery代码：

$(function(){
    $('input#SearchGo').on('click', function(){
        var searchid = $('input#search').val();
        var dataString = 'search='+ searchid;
        $.ajax({
            type: "POST",
            url: "tickets.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $("#result").html(html).show();
            }
        });
        return false;    
    });
});

它进行实时搜索并将数据发布到PHP页面

在每个页面上，我都有一个div，id为overlay，在页面加载时有一个加载图像，然后代码如下：

$(window).load(function(){
   // PAGE IS FULLY LOADED  
   // FADE OUT YOUR OVERLAYING DIV
   $('#overlay').fadeOut();
});

加载页面后删除覆盖div

当我运行搜索查询时，overlay div根本没有消失，我尝试添加$'overlay'.fadeOut；在我的成功部分的功能，但它不会淡出div

更新：

下面是加载/覆盖div的HTML

<div id="overlay" class="overlay">
     <img src="images/integra_loading.gif" alt="Loading" width="12%" style="margin-top:15%;" />
     <br /><br />
     <h1>Loading...</h1>
</div>

或者

$(document).on("ajaxComplete", function(){
    $('#overlay').fadeOut();
});

---

不要使用通过ajax请求加载的html脚本调用的函数隐藏ajaxloader。只需在请求之前显示加载程序，并在用响应替换html内容之前隐藏它

function loader(){
    this.id = '#overlay'
};

loader.prototype.show = function(){
    $(this.id).fadeIn();
};

loader.prototype.hide = function(){
    $(this.id).fadeOut();    
};

loaderObj = new loader();

$('.list').live('click', function() {
    loaderObj.show();
    $.ajax({
        type: "GET",
        url: "http://echo.jsontest.com/uid/12345/value/nuno_bettencourt",
        cache: false,
        dataType: "json",
        success: function(json) {
            // setTimeout only to delay the response and let the loader do his thing ;)
            setTimeout(function(){
                loaderObj.hide();
                $('#ajaxResult').html("UID=" + json.uid + "\nName=" + json.value);    
            }, 2000);

        }
    });

---

我给你举了个小例子http://jsfiddle.net/358Fz/1/

完成$.ajax后，添加一个“完成”。在那做，做淡出

    $.ajax({
         ...
    }).done(function(){
         $('#overlay').fadeOut();
    });

---

您可以在失败时为添加.fail等。请参阅：

只需在单击事件之外定义加载程序变量，然后在需要时使用它。如果只需遍历DOM一次即可找到loader元素，那么开销就会减少。您还可以将on事件更改为仅单击事件以保存几个按键，除非您需要将事件委托给其他元素。此外，您不需要查找$inputsearch，因为ID是唯一的。删除变量选择器并仅查找ID将更有效

$(function() {
    var $loader = $('#overlay');
    $('.list').click(function(){
        $loader.fadeIn();
        $.ajax({
            type: "GET",
            url: "http://time.jsontest.com/",
            dataType: 'json',
            cache: false,
            success: function(json) {
                 $loader.fadeOut();
                $("#axajResponse").html('<b>Current Time:</b> ' + json.time).show();
            }
        });
        return false;    
    });
});

在上面的示例中，我将返回当前时间，以便您可以看到每个单击事件的响应变化

---

下面是一个示例：

请提供一些HTML，特别是overlay div.check更新的问题您使用的是哪种浏览器？检查javascript控制台是否有任何错误。如果运行$'overlay'.fadeOut；从控制台，它会消失吗？如何从控制台运行它？

$(function() {
    var $loader = $('#overlay');
    $('.list').click(function(){
        $loader.fadeIn();
        $.ajax({
            type: "GET",
            url: "http://time.jsontest.com/",
            dataType: 'json',
            cache: false,
            success: function(json) {
                 $loader.fadeOut();
                $("#axajResponse").html('<b>Current Time:</b> ' + json.time).show();
            }
        });
        return false;    
    });
});