change css of element animated

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.开发者_如何学Cpng) 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 );
});

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

If you want fading one (background) image to antoher you have to make another element (within parent for example) with the state you want to fade it to, and set it's opacity to 0. Then just show it - animate it's opacity to 1.

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $('#submit').hover(
            function(){ 
                $(this).attr({ "style" : "background:url('enter_over.gif');"});
            },
            function(){
                $(this).attr({ "style" : "background:url('enter.gif');"});             }
        );
    });
</script>

Refer: http://blog.mirthlab.com/2008/04/18/simple-image-submit-button-rollovers-with-jquery/

If you're willing to use jQuery UI, it provides a switchClass function which does exactly that. You could probably extract this from jQuery UI if that's the only piece you want.