Switching class without previous read
I have a CSS3 animation with transitions that take effect based on what is defined in the classes that are added, removed, toggled, etc.
So I have a class ' flyOff
' that is being used; when added, the element flies up and to the left. When he leaves, he flies down / jumps from this position.
$('.exchange-tablet').addClass('transTime flyOff');
$('.exchange_text').fadeOut();
This is normal.
However...
I need to get it back from a different position (especially from the top right).
When I do removeClass
flyOff
, it flies (transitions) down from the top left corner as defined with flyOff
.
Problem: I need it to go down (fly down) from the top right.
So, I created a class .flyOffr
with the specified top-right coordinates.
$('.exchange-tablet').removeClass('flyOff').addClass('flyOffr');
But when I do it above, it still moves out of position flyOff
(top left) - because I think it is removed before the needed one is attached flyOffr
.
Trying with .toggleClass
$('.exchange-tablet').toggleClass('flyOff flyOffr').addClass('complete');
flyOffr
not read above.
The problem is not with borders or CSS coordinates - because when I add and remove classes in the console; eg. Add flyOffr
it will fly as needed I just need a solution to move from two classes. Without flyOff
enter read before flyOffr
.
So, I think I need a solution like .switchClass
. Any pointers?
Update . Which worked (albeit not so perfect) via @ shash7 (but with a little tweak)
$('.exchange-tablet').removeClass('flyOff');
setTimeout(function() {
$('.exchange-tablet').addClass('flyOffr');
$('.exchange-tablet').removeClass('flyOffr');
}, 600);
source to share
Try this (if your animation takes 250ms):
$('.exchange-tablet').removeClass('flyOff');
setTimeout(function() {
$('.exchange-tablet').addClass('flyOffr');
}, 250);
But I highly recommend that you do not take this route. Instead of creating classes to move elements around, add a css transform and a function to add it to the element for moving elements around programmatically.
Or even better, use an animation library like movejs .
source to share