Question

我对js / jQuery很新我试图在点击时慢慢改变div元素的背景（-image）。

我已经阅读了很多切换和淡化教程，但我没有得到它。

感谢您的帮助。

<div class="col-xs-6 col-sm-6 mainchar">
<div id="jakob" class="jakob">
</div></div>


<script type="text/javascript">
$(document).ready(function(){

        $("#jakob").click(function() {
            if( $("#jakob").hasClass('jakob') ){
                $("#jakob").stop().removeClass('jakob').fadeTo('slow', 1);
                $("#jakob").stop().addClass('jakob2').fadeTo('slow', 1);
            } else {
                $("#jakob").stop().removeClass('jakob2').fadeTo('slow', 1);
                $("#jakob").stop().addClass('jakob').fadeTo('slow', 1);
            }
        });
});
</script>


<style type="text/css">
div.jakob { background: #000 url('../img/jakob1.jpg') center center no-repeat; background-size: 80%; }
div.jakob2{background: #000 url('../img/jakob2.jpg') center center no-repeat; background-size: 80%;}
</style>

Answer 1

Use this jquery script to change div or image slow

use this scipt

Go this this fidder

Answer 2

你可以做这样的事情

$('#test').on('click', function () {
    $(this).fadeTo('slow', 0.3, function () {
        $img = 'https://www.gravatar.com/avatar/24baf7f7e3cbc726fdfdff569cb809f2?s=32&d=identicon&r=PG';
        $(this).css('background-image', 'url(' + $img + ')');
    }).fadeTo('slow', 1);
});

http://jsfiddle.net/a1wLvy89/1/

Jquery onClick淡入淡出切换addClass removeClass

2 个答案: