better way to start a delay in jQuery?

Question

I am using this code to delay the entrance of an element to the viewable area of the screen, but the first animate is wholly unecessary, other than to start a queue that delay can then delay.

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

is there a more sensible way to do it?

Answer 1

I don't get it. If there's no need for the first .animate(), when why do it? If you just need an extra 400ms, then add it to the first .delay().

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

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

You don't need an initial .animate() to start a queue. The .delay() method will use the default "fx" queue.

---

EDIT:

The issue you may be having is that if #top-message doesn't have an initial value for top, it will be reported as auto in some browsers. This value is not useful for animations.

To solve this, either give #top-message an initial value in CSS:

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

...or in javascript:

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

Answer 2

How about doing it in a callback ?

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

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