jQuery Div Not hiding after Ajax Post

Here's the code:

$('div#listing').slideUp(function(){
    $('div#img_loading').show(); //THIS WORKS
});

var jqxhr = $.post("process.php", {page: 1},
    function(data) {
        //some code
    });

jqxhr.complete(function(){
    $('div#img_loading').hide(function()开发者_C百科{ //THIS HIDE FUNCTION DOES NOT WORK
        $('div#listing').slideDown(); //THIS LINE WORKS
    });
});

The image successfully loaded but it does not hide itself after the ajax complete. Weird thing is the $('div#listing').slideDown() works, but the hide() does not.

Thanks so much!

I don't think you want a function inside your hide command

$('div#listing').slideUp(function(){
    $('div#img_loading').show(); //THIS WORKS
});

var jqxhr = $.post("process.php", {page: 1},
    function(data) {
        //some code
    });

jqxhr.complete(function(){
    $('div#img_loading').hide();
    $('div#listing').slideDown();
});

Please read through the specifications of the hide jQuery API. In your code, you are trying to specify a callback, which you need not. Just use this as is:

$('div#img_loading').hide();

EDIT: Alternatively, you can just put the code above inside the ajax callback function:

var jqxhr = $.post("process.php", {page: 1},
    function(data) {
        //some code
        $('div#img_loading').hide();
    });