JQuery背景過渡效果

Question

我有一個簡單的jQuery代碼。您點擊該圖標，它會使用如下代碼更改背景圖片：

$('div').css({'background-image':'url()'}); 

我該如何使用動畫？我搜索谷歌，但沒有真正找到任何幫助我的東西。

Answer 1

如果你想淡入，它可以通過jQuery和CSS完成。我以一種可以在動態情況下使用的方式做到了這一點，您只需在jQuery中更改背景圖像，它將完成所有工作，也可以在CSS中更改時間。

HTML：

<div class="test"> 

CSS：

.test { 
    /* as default, we set a background-image , but it is not nessesary */ 
    background-image: url(http://lorempixel.com/400/200); 
    width: 200px; 
    height: 200px; 
    /* we set transition to 'all' properies - but you can use it just for background image either - by default the time is set to 1 second, you can change it yourself*/ 
    transition: linear all 1s; 
    /* if you don't use delay , background will disapear and transition will start from a white background - you have to set the transition-delay the same as transition time OR more , so there won't be any problems */ 
    -webkit-transition-delay: 1s;/* Safari */ 
    transition-delay: 1s; 
} 

JS：

$('.test').click(function() { 
    //you can use all properties : background-color - background-image ... 
    $(this).css({ 
    'background-image': 'url(http://lorempixel.com/400/200)' 
    }); 
}); 

我不認爲這是可以使用jQuery的動畫功能，因爲背景圖像不進行有必要的CSS屬性來做這樣的淡出。 jQuery只能利用瀏覽器使之成爲可能。

此外，您可以嘗試將背景圖像定位爲動畫方法。 https://snook.ca/archives/javascript/jquery-bg-image-animations

演示：https://snook.ca/technical/jquery-bg/

Answer 2

$("div").css({'background-image': 'url(http://lorempixel.com/400/200)'}).animate({height: '300px', opacity: '0.4'}, "slow").animate({width: '300px', opacity: '0.8'}, "slow"); 

這是一些jquery的方法鏈接。