javascript - jquery css background image slideshow with transtion effect

Question

I need to add some nice transition fade effect to the change of the following simple sideshow:

    var images = [
 "http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w",
      "http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$",
      "https://i.kinja-img.com/gawker-media/image/upload/s--8a-AXhau--/c_scale,fl_progressive,q_80,w_800/zec3un8rzcmblrdlyswb.jpg",
      "http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg",
      "http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg",
      "http://magic-spells-and-potions.com/images/flower-language-vertical.png",
    ];

    var i = 0;
    var div;
    $(function() {

      div = $('.header_summer');
      console.log("loaded");
      setTimeout(changeBack, 1000);
    });

    function changeBack() {
      i = ++i % images.length;
      if (i > images.length) {
        i = 0;
      }
      console.log('url("' + images[i] + '");');

      // div.css('background-image', "url('" + images[i] + "')");

      // preload image check

//
  		$('<img/>').attr('src', images[i]).load(function() 
  		{
		   $(this).remove();
		   $('.header_summer').css('background', 'url("' + images[i] +'") no-repeat 0px 0px');
		});
		
		//
      setTimeout(changeBack, 5000);
    }

.header_summer  {
	background: url('../tpl/mblmhv1/images/summer_cover1.jpg') no-repeat 0px 0px;
	
	background-size: cover;
	min-height:920px; /* 800px; */
	
	
	
	/* TRANSISITION - not qorking here
	transition(background-image 0.5s ease-in-out);
	
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    */
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <div class='header_summer'></div>

Answer 1

Try this:

.header_summer {
    background: url('../tpl/mblmhv1/images/summer_cover1.jpg') no-repeat 0px 0px;

    background-size: cover;
    min-height:920px; /* 800px; */
    transition: background-image 0.2s ease-in-out;
}