淡入更改的 div 背景图像答案

【问题标题】：Fade in a changed div background image淡入更改的 div 背景图像
【发布时间】：2016-08-29 20:14:56
【问题描述】：

我正在使用以下 js 更改 div 上的 background-image，但我想淡入图像。我该怎么做？

    var now = 0;
    var int = self.setInterval("changeBG()", 3500);
    var array = ["image1.jpg", "image2.jpg", ];

    function changeBG(){
        //array of backgrounds
        now = (now+1) % array.length ;
        $('.documentary').css('background-image', 'url("' + array[now] + '")');
    }

【问题讨论】：

stackoverflow.com/questions/12227901/…

标签： javascript jquery html css

【解决方案1】：

使用 css 动画。在纪录片的地方是这样的：

-webkit-transition-property: background-image 300ms ease-in 200ms;
-moz-transition-property: background-image 300ms ease-in 200ms;
-o-transition-property: background-image 300ms ease-in 200ms;
transition: background-image 300ms ease-in 200ms;

【讨论】：

【解决方案2】：

您正在寻找透明度吗？

您可以在包含图像的 div 上使用opacity，但这也会使里面的所有内容也变得透明。

或者你可以让图像一开始就透明。

【讨论】：