jQuery fadeOut delay not working first time after page load

Question

I have implemented the following code:

$.ajax({
        type: 'POST',
        data: "id="+id,
        url: 'xyz.php',
        async: false,
        dataType: 'json',
        success: function(data){                
            $('#message_'+id).html('Estás de acuerdo<span class="msg_order_close"></span>').show().fadeOut('slow').delay('5000');

        }
});

Here I have used fadeOut('slow').delay('5000'); to hide content after 5 seconds. But it doesn't work 1st time after page has stopped loading on 1st ajax request. And it works very well after 1st request. The content will be hide after 5 seconds. On the 1st time new appended content will be hide immediately.

Suggestions will be accepted.

Answer 1

The problem is that you're waiting after hidding your content. Put the .delay() part before de fadeOut() function.

$.ajax({
        type: 'POST',
        data: "id="+id,
        url: 'xyz.php',
        async: false,
        dataType: 'json',
        success: function(data){                
            $('#message_'+id).html('Estás de acuerdo<span class="msg_order_close"></span>').show().delay(5000).fadeOut('slow');

        }
});

Also, 5000 is not a string, so you should remove the quotes.

Answer 2

If you want to delay before fading out, you will need to switch the order:

.delay(5000).fadeOut('slow')

(Credit to @tabz100 for seeing that first)

Now if you want to fade out for a length of 5 seconds, then use

.fadeOut(5000, 'slow')