jQuery: Simple Fade buttons from one class to another?

I've been searching everywhere for this, hope some of you experts can help me out, as i'm am finding it difficult, i've been searching how to do this, but only finding actual direct colour, opacity or image swapping fade tutorials..... but no actual how to fade one class to another class on hover...

For example:

Button has .btn class....

Rollover, it becomes:

.btnhover

But I would like it to h开发者_开发问答ave a nice gentle fade to the new class, not just swap (As that can easily be done in just css)

Thanks.

jQuery UI has a toggleClass method which can be used to animate from class A to class B.

toggleClass( class, [duration] )

Adds the specified class if it is not present, and removes the specified class if it is present, using an optional transition.

http://jqueryui.com/demos/toggleClass/

This can be done with animate() - you need to use jquery API to be able to use this function. Pretty simple - just animate the properties of the class you want to change on hover.

http://api.jquery.com/animate/

I think the Jquery UI plugin allows for animation between classes. It might be worth checking that out:

Jquery UI Animate

Depending on how complex is the class (if it has images in the background, different font types, etc..) I think a way you can achieve this effect is by duplicating the element, leaving one hidden and then use the fadeIn and fadeOut effects.

This could be an example:

<div id="button">
  <div class="normal"> 
     Your element 
  </div>
  <div class="hover" style="display:none;"> 
     Your element while hovering
  </div>
</div>

<script type="text/javascript">

$("#button").mouseenter(function(){
    $("#button.normal").fadeOut();    
    $("#button.hover").fadeIn();

}).mouseleave(function(){
    $("#button.normal").fadeIn();    
    $("#button.hover").fadeOut();

});

</script>

What you're talking about is called transition, meaning that going from one state to another state smoothly and over time, not abruptly and sudden. As an alternative, I suggest using CSS3 Transitions, or jQuery animate function. Please let me know if those alternatives can satisfy your requirements.

Update: jQuery itself doesn't have this capability. But jQueryUI extends jQuery's animate method such that you can apply transition from one CSS class to another CSS class smoothly. Here is where you can find it.

Update:

var button = $('#button');
button.hover(function(){
   button.switchClass('ordinary', 'hovered', 1000);       
}, function(){
   button.switchClass('hovered', 'ordinary', 1000); 
});