jquery fadein simultaneously

Question

I am trying to fade out the existing text of a dialog box, and then fade in an error image simultaneously.

How might i do this? Right now I have it (somewhat) working but a few things wrong with it.

1. it fades out instantly
2. its not simultaneous (i want 1 to fade in while the other fades out).

Note: I cant just fade in a div because throughout the whole program #dialog is being written to, so if I stored the div.error in there it would just be overwritten, so i need to do it this way.

what i have so far

$.ajax({
            type: "POST",
            url:  "/checkstatus/" + id,
            dataType: "html",
            error: function(data){
                $("#dialog").fadeOut();
                $("#dialog").hide().html("<img src='/img/deleted.jpg' alt='deleted'>")
                $("#dialog").fadeIn();
            }
        });

Answer 1

$.ajax({
    type: "POST",
    url:  "/checkstatus/" + id,
    dataType: "html",
    error: function(data){
        $("#dialog").fadeOut(function(){
             $("#dialog")
                .html("<img src='/img/deleted.jpg' alt='deleted'>")
                .fadeIn()
        });

    }
});

Answer 2

You cannot have one object fadeOut and fadeIn at the same time - the object can only have one state at a time (it's either fading in or fading out, but not both).

If you really want that visual effect, you will need two separate objects and one fades out and the other fades in. For example, that's how many slideshows work when they fade out one image and, at the same time, fade in the next image. They are actually fading out one object and fading in another.

So, if you really wanted that dual fade at the same time visual effect for your dialog, you would need two dialogs, one fading out and the other fading in.

If you're willing to do them sequentially so the old dialog fades out and then the new one fades in (the two fades are one after the another rather than at the same time), then you can use the type of code that Vitaly proposed where you do the fadeOut() and then, in the completion function for that fadeOut(), you change the contents of the dialog and then do a fadeIn().

If you had reasons to only want one dialog and want the simultaneous fades, then you could fadeOut() one block of content in the dialog and fadeIn another block of content. You would put each block of content in it's own div inside the same dialog and fade one out and the other in. You'd have to manually position both divs to be on top of one another (overlaid) too. It's possible, but takes a little more work.