jquery - 更改动画元素的CSS

Question

我想将一个(按钮)图像淡入另一个图像。有 2 个固定的 css 类:

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

是否有任何 jquery 命令可以执行此操作？ (只是从 .btn 到 .btn_hover 的动画)谢谢!

我已经厌倦了使用答案，但不起作用:

$("#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>

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

对于此功能，您需要名为 jQuery UI 的扩展 jQuery 库...

“toggleClass”方法允许您自动更改这些类。所以你可以做

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