Best way to trigger delay in jQuery?

Question

I use this code to delay the entry of an element into the visible area of ​​the screen, but the first animit is completely unnecessary, except to start a queue, the delay of which may be delayed.

$("#top-message").animate({top: '-500px'},400).delay(1000).animate({top: '0px'},800).delay(3000).animate({top: '-500px'},800);

is there a smarter way to do this?

Answer 1

I do not understand. If there is no need for the first .animate(), then why do this? If you just need an extra 400ms, add it to the first one .delay().

Example: http://jsfiddle.net/LFt4k/

$("#top-message").delay(1400).animate({top: '0px'},800)
                 .delay(3000).animate({top: '-500px'},800);

You do not need a start .animate()to start the queue. The method.delay() will use the "fx"default queue .

---

EDIT:

, , , #top-message top, auto. .

, #top-message CSS:

#top-message {
    top: -500px;
}

... javascript:

$("#top-message").css({top:-500})
                 .delay(1400).animate({top: '0px'},800)
                 .delay(3000).animate({top: '-500px'},800);

Answer 2

?

$("#top-message").animate({top: '-500px'}, 400, function () {
    $(this).delay(1000).animate({top: '0px'}, 800, function () {
        $(this).delay(3000).animate({top: '-500px'}, 800);
    });
});

: http://jsfiddle.net/Avinash/LFt4k/2/