Question

我一直试图让一个褪色的背景图像脚本起作用，但我在JS很漂亮。问题是淡入淡出效果在chrome中运行得很好，但是在Firefox和IE中，图片只是没有消失。

这是我的代码：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>

<body style="margin:0; padding:0;">
<style>
.bg_img_slider{
     min-height:530px;
     background-image:url("a.jpg");
     background-repeat:no-repeat; 
     background-position:center;
     background-size:cover;}
</style>

<script>
var newBg = [
    'b.jpg',
    'c.jpg',
    'd.jpg'
    ];
    var i = 0;
var rotateBg = setInterval(function(){
    i++;
    if(i > 2)
        i=0;
    $('.bg_img_slider').css({backgroundImage : 'url(' + newBg[i] + ')'}).fadeIn('slow', 1);
}, 3000); 
</script>

<div class="bg_img_slider"></div>

</body>
</html>

Answer 1

您可以使用CSS3过渡而不是使用jquery方法fadeIn（）。

<强> JSFIDDLE DEMO

.bg_img_slider {
    min-height:530px;
    background-image:url("http://texy.dk/a.jpg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    -webkit-transition: background-image .6s ease-in;
    transition: background-image .6s ease-in;
}

JS FadeIn不在Firefox和IE中工作

1 个答案: