Jquery onClick fade toggle addClass removeClass

Question

I´m quite new to js/jQuery and I´m trying to change the background(-image) of an div element slowly on click.

I´ve read so many toggle and fade tutorials but I didn't get it .

Thanks for your help.

<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

You can do something like this

$('#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/