CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kimdt27
Kimdt27

Reputation: 1

JS FadeIn not working in Firefox and IE

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

Answers (1)

dowomenfart
dowomenfart

Reputation: 2803

Instead of using the jquery method fadeIn() you can use CSS3 transitions.

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;
}

Upvotes: 1

Related Questions