jquery - switch class without the previous being read -

i have css3 animation transitions take effect based on defined in classes added, removed, toggled, etc.

so, have class 'flyoff' used to; when added, make element fly , left. when removed flys down / transitions down position.

$('.exchange-tablet').addclass('transtime flyoff'); $('.exchange_text').fadeout(); 

this fine.

however...

i need bring down, different position (specifically top right).

when removeclass flyoff flys (transitions) down top left defined flyoff.

problem: need transition down (fly down) top right.

so, created class .flyoffr defined coordinates of top right.

$('.exchange-tablet').removeclass('flyoff').addclass('flyoffr'); 

but when above, still flys down flyoff position (top left) - because guess removed before needed flyoffr attached.

attempt .toggleclass

$('.exchange-tablet').toggleclass('flyoff flyoffr').addclass('complete');  

flyoffr wasn't being read above..

the problem not css margins or coordinates -- because when add , remove classes in console; eg. add flyoffr flys down needed need solution transition 2 classes. without flyoff bring read before flyoffr does.

so, i'm thinking need .switchclass solution of sorts. pointers?

---

update: worked (though not ideal) via @shash7 (but slight tweaking)

   $('.exchange-tablet').removeclass('flyoff');           settimeout(function() {           $('.exchange-tablet').addclass('flyoffr');           $('.exchange-tablet').removeclass('flyoffr');     }, 600); 

try this(assuming animation takes 250ms):

$('.exchange-tablet').removeclass('flyoff'); settimeout(function() {     $('.exchange-tablet').addclass('flyoffr'); }, 250); 

but highly recommend don't go down route. instead of making classes moving elements around, add transformation css , function add element programmatically moving elements around.

or better, use animation library movejs.