Take the 2-minute tour ×

can this be done?

for eg.

  color: #fff;

  color: #999;

can I fade all elements that have class1 to class2 when the mouse is over the element, and back to class1 when mouse is out?

share|improve this question

6 Answers 6

up vote 2 down vote accepted

If you give both the same absolute position, using fadeIn() and fadeOut() will have this effect (attached to onmouseover and onmouseout).

share|improve this answer

If you don't want to use a plugin, you can do the following:

function () {
    $(this).fadeOut(function () {
function () {
    $(this).fadeOut(function () {
share|improve this answer

Have a look at jQuery UI's extension to addClass. It allows a duration parameter to give the possibility of animation.

Here, I think you want to do something like this:

    $(this).addClass('class2', 800);
}, function(){
    $(this).removeClass('class2', 800);

Obviously you'll need to install jQuery UI for this.

share|improve this answer
can it animate background images? on jquery UI there are only a few css properties listed in animation –  Alex Feb 7 '11 at 10:47

I think this plugin is what you are looking for. It allows you to animate between classes. For example:

$('.class1').animateToClass('.class2', 1000);
share|improve this answer
+1 This is also how I understood the question. Note that for color animations you would need either jQuery UI or a plugin like plugins.jquery.com/project/color –  sunn0 Feb 7 '11 at 10:17
+1 For that link. I assumed jQuery could animate colour. –  Olical Feb 7 '11 at 10:19
doesn't seem to work for me –  Alex Feb 7 '11 at 10:44
@Alexandra So you downloaded the plugin I linked to. Included it just below where you included jQuery and then used the code I showed as an example in conjunction with something like @lonesomeday posted? Because it should work fine, unless you are using jQuery 1.5 which may or may not work with this plugin. –  Olical Feb 7 '11 at 12:23

This is my implementation:

      $(this).fadeOut("fast"); or $(this).hide();
share|improve this answer

i think this might be help full to you....

$('.class1').mouseover(function() {
share|improve this answer
Using jQuery's toggleClass method toggles one class on and off an element. It has nothing to do with two classes and toggling between them. –  Glen May 28 at 13:37

Your Answer


