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库，名为jQuery UI ...

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

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

Answer 2

如果你想要将一个（背景）图像淡化到另一个图像，你必须用你要淡化它的状态制作另一个元素（例如在父母中），并将它的不透明度设置为0.然后只显示它 - 动画它的动画不透明度为1。

Answer 3

<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>

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

Answer 4

如果您愿意使用jQuery UI，它会提供一个switchClass function，它就是这样做的。你可以从jQuery UI中提取这个，如果这是你想要的唯一一个。

更改动画元素的CSS

4 个答案: