Reputation: 1
I have been trying to get a fading background image script to work, but I am pretty noob at JS. The problem is that the fade effect works nicely in chrome, but the picture just shifts without a fade in Firefox and IE.
Here is my code:
<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>
Upvotes: 0
Views: 81
Reputation: 2803
Instead of using the jquery method fadeIn() you can use CSS3 transitions.
.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;
}
Upvotes: 1