Add and remove a class with animation

I have written a script that changes the box's color in another box's hover: http://jsfiddle.net/w5b9v/2/

How can I add animation to 开发者_Go百科this transition? Thanks in advance

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 to Class jquery plugin ;)

The jQuery .animate method animates mostly numeric properties and doesn't cover adding a subtracting a class.

If you simply want to change opacity, you can use .fadeTo.

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

The above will reduce the opacity by half.

This question provides more information, including the jQueryUI switchClass method. That question also suggests the .animateToSelector plugin.

Finally there is animateToClass, but that appears to simply wrap the features of .animate into a class, which means some of your non-numeric values won't work.