JQuery onClick fade toggle addClass removeClass

Question

Я довольно новичок в js/jQuery , и я пытаюсь изменить фон (-image) элемента div медленно на клик.

Я читал так много переключений и исчезают учебники, но я не понял.

Благодарим за помощь.

<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

Вы можете сделать что-то вроде этого

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

Answer 2

 
Use this jquery script to change div or image slow 

use this scipt 

Go this this fidder