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?

Sang Suantak · Answer 1 · 2013-05-15T09:43:44.063

17

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');
    });
});

edited May 15 '13 at 09:43

answered Feb 07 '11 at 10:20

Sang Suantak

5,213
1
27
46

score 15 · Answer 2 · answered Feb 07 '11 at 10:14

15

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.

answered Feb 07 '11 at 10:14

lonesomeday

233,373
50
316
318

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

Olical · Answer 3 · 2011-02-07T10:17:14.407

4

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

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

edited Feb 07 '11 at 10:17

answered Feb 07 '11 at 10:11

Olical

39,703
12
54
77

1

+1 This is also how I understood the question. Note that for color animations you would need either jQuery UI or a plugin like http://plugins.jquery.com/project/color – sunn0 Feb 07 '11 at 10:17
@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 07 '11 at 12:23

score 2 · Accepted Answer · answered Feb 07 '11 at 10:11

2

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

answered Feb 07 '11 at 10:11

drewblaisdell

609
5
16

score 1 · Answer 5 · answered Mar 02 '12 at 16:04

1

This is my implementation:

      $(this).fadeOut("fast"); or $(this).hide();
      $(this).removeClass('css1').addClass('css2');
 $(this).fadeIn("slow");

answered Mar 02 '12 at 16:04

Victor

11
1

score 0 · Answer 6 · answered Oct 29 '18 at 17:10

By providing Jquery hover() with the handlerIn and handlerOut functions as documented here you can easily handle the mouse in and mouse out events. Next, take a look at Jquery UI switchClass() to easily switch between two classes in a clean way. Lastly, adding fadeIn() makes all of this a clean transition.

$("div.class1").hover(
 function(){$("div").switchClass("class1", "class2").fadeIn(800);},
 function(){$("div").switchClass("class2", "class1").fadeIn(800);}
);

Working CodePen

score -2 · Answer 7 · answered Feb 07 '11 at 10:18

-2

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

$('.class1').mouseover(function() {
    $(this).toggleClass('class2');
 });

answered Feb 07 '11 at 10:18

Vivek

10,978
14
48
66

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 Selle May 28 '14 at 13:37

jQuery fade elements from one class to another, on hover

7 Answers7