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>

I have tried appending .fadeIn() to the jquery line that changes the image, and transition effects in the CSS - what am I missing?

I put two different approaches to this in a similar issue: stackoverflow.com/questions/37299477/… If you need help implementing with your specifics let me know — JonSG
– JonSG, Commented May 19, 2016 at 21:38

Cornwell · Accepted Answer · 2016-05-19 21:07:27Z

0

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

answered May 19, 2016 at 21:07

Cornwell

3,3958 gold badges56 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rion Williams · Accepted Answer · 2016-05-19 21:30:43Z

0

It should work with just the transition property defined on your CSS class as any changes to the element should trigger the transition (i.e. when you update the background, you should see the transition):

.header_summer {
  background: url('http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w') no-repeat 0px 0px;
  background-size: cover;
  min-height: 920px;
  /* Transitions and their cross-browser friends */
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}

The syntax generally uses the form <property> <duration> <timing-function> <delay>, so your current transition would be looking for the opacity property to change, which it doesn't seem to be.

You should consider using background instead :

transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;

Example

.header_summer {
  background: url('http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w') no-repeat 0px 0px;
  background-size: cover;
  min-height: 920px;

  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flowers and stuff...</title>
</head>

<body>
  <!-- Your element to switch through -->
  <div class='header_summer'></div>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    // Define your images
    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",
    ];
     // Define your variables
    var i = 0;
    var div;
    $(function() {
      // Set up your div
      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] + "')");
      setTimeout(changeBack, 5000);
    }
  </script>
</body>
</html>

edited May 19, 2016 at 21:30

answered May 19, 2016 at 21:11

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

7 Comments

Nick Over a year ago

Rion, are you seeing a transition work on your example? I don't, I just see an immediate change.

Rion Williams Over a year ago

What browser are you using? It's appearing as expected for me.

Nick Over a year ago

Firefox. get the same in MS edge (IE wtf) I can just about make out that you have a transition from your attached GIF, but the snippet preview just shows immediate change with no fade transition. I'm using an Intel i7 so i don't think its my CPU!

Rion Williams Over a year ago

Does the example work if you were to use background within the transition declaring like the second example prior to the .gif

Nick Over a year ago

Firefox, does the same in MS Edge (IE). Im running an Intel i7 so I don't think its my CPU - just tried a restart too - still the same. Very strange.

|

Collectives™ on Stack Overflow

jquery css background image slideshow with transtion effect

2 Answers 2

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related