Add and remove a class with animation

Question

I wrote a script that changes the color of a box in another field: http://jsfiddle.net/w5b9v/2/

How to add animation to this transition? thanks in advance

Answer 1

You could do something this way http://jsfiddle.net/steweb/fn68L/

JS:

$(document).ready(function(){ $(".wrapper div.me:last").addClass("reduce"); $(".wrapper div.me").hover( function(){ $(this).fadeTo('fast',1); //or $(this).animate({opacity:1},300/*ms*/) $(".wrapper div").not(this).fadeTo('fast',0.8); }); }); 

Or you can check animate in a jquery plugin class ;)

Answer 2

The jQuery.animate method animates mostly numeric properties and does not cover the addition of a class subtraction.

If you just want to change the opacity, you can use . fadeTo .

 $(".wrapper div").not(this).fadeTo('slow', 0.5); 

The above will reduce the opacity by half.

This question contains additional information, including the jQueryUI switchClass method. This question also offers a plugin . AnimateToSelector .

Finally, there is animateToClass , but this apparently just transfers the .animate functions to the class, which means numerical values ​​will not work.