CODEWITHSUNDEEP
jquery
A G
A G

Reputation: 22559

jQuery delay between two animations

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.

Upvotes: 0

Views: 4266

Answers (2)

Thinker
Thinker

Reputation: 14454

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/

Upvotes: 2

Thomas
Thomas

Reputation: 2162

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

Upvotes: 2

Related Questions