gpt4 book ai didi

javascript - JS FadeIn 在 Firefox 和 IE 中不工作

转载 作者:太空宇宙 更新时间:2023-11-04 12:08:05 26 4
gpt4 key购买 nike

我一直在尝试让褪色的背景图像脚本工作,但我对 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>

最佳答案

您可以使用 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;
}

关于javascript - JS FadeIn 在 Firefox 和 IE 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29236889/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com