jQuery fade elements from one class to another, on hover

Question

can this be done?

for eg.

.class1{
  background-image:(whatever.jpg)
  color: #fff;
}

.class2{
  background-image:(whatever2.jpg)
  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?

Answer 1

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

$(".class1").hover(
function () {
    $(this).fadeOut(function () {
        $(this).removeClass("class1").addClass("class2").fadeIn('fast');
    });
},
function () {
    $(this).fadeOut(function () {
        $(this).removeClass("class2").addClass("class1").fadeIn('fast');
    });
});

Answer 2

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:

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

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

Answer 3

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

Answer 4

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

$('.class1').animateToClass('.class2', 1000);