如何使用jquery將淡入淡出函數添加到此腳本中？

Question

我使用下面的腳本在點擊時更改背景圖片，但我希望使用淡入淡出的過渡更平滑些。這可能嗎？

下面是腳本：

 <script> 
    $(function(){ 
     $("#button").on("click", function(e) { 
     e.preventDefault(); 
     $('.class').css("background-image", "url('http://website.com/images/image.png')"); 

     }); 
     }); 
     </script> 

Answer 1

第一淡出的.class元素，並使用回調函數來更改CSS並再次淡入....

<script> 
$(function(){ 
    $("#button").on("click", function(e) { 
    e.preventDefault(); 
    $('.class').fadeOut(1000,function(){ 
     $(this).css("background-image", "url('http://website.com/images/image.png')").fadeIn('slow'); 
     }) 

    }); 
}); 
    </script> 

Answer 2

試試這個，它會給你一個很好的淡入效果。

<script> 
    $(function(){ 
     $("#button").on("click", function(e) { 
     e.preventDefault(); 
     $('.class').fadeIn(800).css("background-image", "url('http://website.com/images/image.png')"); 

     }); 
     }); 
</script>