Problem with jQuery's order of effects

I would like to fadeOut a button, then fadeIn the response an Ajax call. The response is a a new button. What the following code does, however, is fadeOut the first button, fa开发者_Python百科de it back in, then replace it with the new one. I tried a few combinations but could not get it to work. where did I go wrong?

beforeSend: function()
{
    $(this).fadeOut("slow");
},

success: function(response)
{
    $(this).fadeIn("slow", function () {
        $(this).parent().html(response);
    });
}

this inside an AJAX call is not the previous element anymore. You must store it in a var previous to the AJAX call, like:

var button = $(this);

and later:

button.fadeOut();

and so on.

Try this (note the mistyped "show" on fadeOut):

beforeSend: function()
{
    $(this).fadeOut("slow");
},

success: function(response)
{
    $(this).parent().html(response);
    $(this).stop().fadeIn("slow");
}

$(this).parent().html(response); would effectively eliminate this. So changing it to this should fix it:

$(this).parent().html(response);
$("#thething").stop().fadeIn("slow");

where #thething is the id of "this"

EDIT: also what morgar said.