Question

我需要为以下简单的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>

我尝试将.fadeIn（）附加到更改图像的jquery行，并在CSS中转换效果 - 我缺少什么？

Answer 1

试试这个：

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

Answer 2

它应该只与CSS类上定义的transition属性一起使用，因为对元素的任何更改都应该触发转换（即当您更新background时，您应该看到转换）：< / p>

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

语法通常使用<property> <duration> <timing-function> <delay>形式，因此您当前的转换将寻找要更改的opacity属性，而这似乎并非如此。

您应该考虑使用background代替：

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;

示例

＆＃13;
＆＃13;
.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; }
＆＃13;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Flowers and stuff...</title> </head> <body>  <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>
＆＃13;
＆＃13;
＆＃13;

jquery css背景图片幻灯片与transtion效果

2 个答案: