Question

I would like to fade one (button) image to another.
There are 2 fixed css class:

.btn{
background: url(../images/btn.png) no-repeat 0 0;
text-decoration: none;
height: 45px;
width: 245px;
margin:0;
border: 0;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
padding: 0 10px 0 10px;
text-align: left;
font-weight: bold;
}
.btn_hover{
border: 0;
background: url(../images/btn.png) no-repeat 0 -45px;
text-decoration: none;
height: 45px;
width: 245px;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
padding: 0 10px 0 10px;
text-align: left;
font-weight: bold;
}

Is there any jquery command to do this? (Just animate from .btn to .btn_hover)
Thanks!

I have tired this using the answers, but does not work:

$("#button").bind("mouseover, mouseout", function() {
    $("#button" ).switchClass( "btn", "btn_hover", 1000 );
});

Answer 1

<style>
    .toggler { width: 500px; height: 200px; position: relative; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect {position: relative;  width: 240px;  padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
    .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
    </style>
    <script>
    $(function() {
        $( "#button" ).click(function() {
            $( "#effect" ).toggleClass( "newClass", 1000 );
            return false;
        });
    });
    </script>

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

For this functionality you need the extended jQuery library called jQuery UI…

the “toggleClass” method allows you to automatically change those classes. So you could do

$("#button").bind("mouseover, mouseout", function() {
$( "#effect" ).toggleClass( "newClass", 1000 );
            return false;
});