jQuery fade elements from one class to another, on hover
17,677
Solution 1
If you give both the same absolute position, using fadeIn() and fadeOut() will have this effect (attached to onmouseover and onmouseout).
Solution 2
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');
});
});
Solution 3
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.
Solution 4
I think this plugin is what you are looking for. It allows you to animate between classes. For example:
$('.class1').animateToClass('.class2', 1000);
Solution 5
This is my implementation:
$(this).fadeOut("fast"); or $(this).hide();
$(this).removeClass('css1').addClass('css2');
$(this).fadeIn("slow");
Comments
-
Alex almost 2 years
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?
-
sunn0 over 13 years+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
-
Alex over 13 yearscan it animate background images? on jquery UI there are only a few css properties listed in animation
-
Olical over 13 years@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.
-
Glen Selle about 10 yearsUsing jQuery's toggleClass method toggles one class on and off an element. It has nothing to do with two classes and toggling between them.