title: JS FadeIn not working in Firefox and IE
body: <p>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.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body style="margin:0; padding:0;"&gt;
  &lt;style&gt;
  .bg_img_slider{
       min-height:530px;
       background-image:url("a.jpg");
       background-repeat:no-repeat; 
       background-position:center;
       background-size:cover;}
  &lt;/style&gt;
  
  &lt;script&gt;
  var newBg = [
      'b.jpg',
      'c.jpg',
      'd.jpg'
      ];
      var i = 0;
  var rotateBg = setInterval(function(){
      i++;
      if(i &gt; 2)
          i=0;
      $('.bg_img_slider').css({backgroundImage : 'url(' + newBg[i] + ')'}).fadeIn('slow', 1);
  }, 3000); 
  &lt;/script&gt;
  
  &lt;div class="bg_img_slider"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>