jQuery delay between two animations

Question

Code:

   $("#telecomGrayscale", this).stop().animate({ top: '467px' }, 
    { duration: 400 }).delay(800).queue(function() {
                $("#boxcaptionTelecom", this).stop().animate({ top: '272px' }, { duration: 900 });
                });

The above code is not working as needed. The 2nd animation that is inside the queue () is not working.

I just need to delay the second animation. Also tried setTimeout and setInterval could not get them to work.

Answer 1

I think it should be in chain:

$("#telecomGrayscale", this).stop().animate({ top: '467px' }, 
{ duration: 400 }).delay(800).animate({ top: '272px' }, { duration: 900 });

edit: Forgive my mistake. If you want to make it on two different elements, then you should make first parameter of queue() 'fx', and then, as second parameter your function. Look at function documentation at http://api.jquery.com/queue/

Answer 2

In your second animation, the this is not what you think it is, so the selector with this as a context is most likely empty.

Try if this works:

var self = this;
$("#telecomGrayscale", self)
    .stop()
    .animate(
        { top: '467px' },
        { duration: 400 }
    )
    .delay(800)
    .queue(
        function() {
            $("#boxcaptionTelecom", self)
                .stop()
                .animate(
                    { top: '272px' },
                    { duration: 900 }
                );
            return $(this).dequeue();
        }
    );