Launching css in sequence with JQuery

Question

I am trying to launch an animation with JQuery using .css. I want to turn letter left, then right, then again left and right while it will be moving up.

$('.envelope').click(function() {
    $(this).find('.list')
    .animate({top:'0px'},1000);
    $(this).find('.list').delay(100)
    .css({"-ms-transform":"rotate(-6deg)","-webkit-transform":"rotate(-6deg)","transform":"rotate(-6deg)"});
    $(this).find('.list').delay(200)
    .css({"-ms-transform":"rotate(6deg)","-webkit-transform":"rotate(6deg)","transform":"rotate(6deg)"});
    $(this).find('.list').delay(300)
    .css({"-ms-transform":"rotate(-6deg)","-webkit-transform":"rotate(-6deg)","transform":"rotate(-6deg)"});
    $(this).find('.list').delay(400)
    .css({"-ms-transform":"rotate(6deg)","-webkit-transform":"rotate(6deg)","transform":"rotate(6deg)"});
    });

adding link

It's not clear to me what is wrong. Which behavior is not working for you? — Nick
– Nick, Commented Jun 2, 2013 at 16:27
Because Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property. Why letter is not turning left, right, left and right, but it is only turning right? — M-K
– M-K, Commented Jun 2, 2013 at 16:37

Nick · Accepted Answer · 2013-06-02 17:11:53Z

1

You should use jQuery.queue for this

http://api.jquery.com/jQuery.queue/

I can make you an example if you need one. Here is a good write up:

http://cdmckay.org/blog/2010/06/22/how-to-use-custom-jquery-animation-queues/

The example is doing something very similar to what you are trying to accomplish. Let me know if you can't get this working. I can throw together a quick example for you.

answered Jun 2, 2013 at 17:11

Nick

19.7k53 gold badges191 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nico Burns · Accepted Answer · 2013-06-02 17:28:34Z

0

The jQuery transit plugin is designed for exactly this! It is jQuery animation API compatible, but uses CSS transitions.

http://ricostacruz.com/jquery.transit/

answered Jun 2, 2013 at 17:28

Nico Burns

17.1k10 gold badges43 silver badges56 bronze badges

Collectives™ on Stack Overflow

Launching css in sequence with JQuery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related