jQuery delay between two animations

Code:

   $("#telecomGrayscale", this).stop().animate({ top: '467px' }, 
    { d开发者_运维技巧uration: 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.

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();
        }
    );

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/