Avvio di CSS in sequenza con JQuery - javascript, jquery, css

Sto cercando di avviare un'animazione con JQuery utilizzando .css. Voglio girare la lettera a sinistra, poi a destra, poi di nuovo a sinistra ea destra mentre si sposta verso l'alto.

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

aggiunta link

risposte:

Dovresti usare jQuery.queue per questo

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

Posso farti un esempio se ne hai bisogno. Ecco un buon commento:

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

L'esempio sta facendo qualcosa di molto simile a quello che stai cercando di realizzare. Fammi sapere se non riesci a farlo funzionare. Posso mettere insieme un rapido esempio per te.

Il plugin di transito jQuery è progettato proprio per questo! È compatibile con l'API di animazione jQuery, ma utilizza le transizioni CSS.

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