Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

animating addClass/removeClass with jQuery

People also ask

Which jQuery function is used to add animation to an element?

The jQuery animate() method is used to create custom animations. Syntax: $(selector).

What is removeClass in jQuery?

The removeClass() method removes one or more class names from the selected elements. Note: If no parameter is specified, this method will remove ALL class names from the selected elements.


Since you are not worried about IE, why not just use css transitions to provide the animation and jQuery to change the classes. Live example: http://jsfiddle.net/tw16/JfK6N/

#someDiv{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Another solution (but it requires jQueryUI as pointed out by Richard Neil Ilagan in comments) :-

addClass, removeClass and toggleClass also accepts a second argument; the time duration to go from one state to the other.

$(this).addClass('abc',1000);

See jsfiddle:- http://jsfiddle.net/6hvZT/1/


You could use jquery ui's switchClass, Heres an example:

$( "selector" ).switchClass( "oldClass", "newClass", 1000, "easeInOutQuad" );

Or see this jsfiddle.


You just need the jQuery UI effects-core (13KB), to enable the duration of the adding (just like Omar Tariq it pointed out)