在一个div上添加背景图片变化的过渡效果

Question

我将使用jQuery+CSS更改一个div的背景图片，如下所示：

：

var slide_images = ["http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg", "http://www.labrasseriefirenze.it/labrasserie/wp-content/uploads/2013/12/spaghetti-carbonara.jpg"];
var slide_count = 0;


$(document).ready(function() {

      setInterval(function() {
          slide_count=++slide_count%slide_images.length;

          $('.slide_photo').css('background-image', 'url(\''+slide_images[slide_count]+'\')');
          }, 4000);

});

.slide_photo {
  position: relative;
  top: 30px;
  width: 100%;
  height: 200px;
  background-image: url('http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  transition: all .2s ease;
}
.slide_photo:hover {
  background-size: 110% auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="slide_photo"></div>

问题是: 是否可以添加淡入效果或过渡，使变化更加流畅？

- Andrew

Answer 1

如何添加一些类似于这样的CSS3动画呢？

.slide_photo{
  -webkit-animation: fade 4s infinite;
  -moz-animation: fade 4s infinite;
  -o-animation: fade 4s infinite;
  animation: fade 4s infinite;
}

.slide_photo {
  position: relative;
  top: 30px;
  width: 100%;
  height: 200px;
  background-image: url('http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  transition: all .2s ease;
  -webkit-animation: fade 4s infinite;
  -moz-animation: fade 4s infinite;
  -o-animation: fade 4s infinite;
  animation: fade 4s infinite;
}
.slide_photo:hover {
  background-size: 110% auto;
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

var slide_images = ["http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg", "http://www.labrasseriefirenze.it/labrasserie/wp-content/uploads/2013/12/spaghetti-carbonara.jpg"];
var slide_count = 0;


$(document).ready(function() {

  setInterval(function() {
    slide_count = ++slide_count % slide_images.length;

    $('.slide_photo').css('background-image', 'url(\'' + slide_images[slide_count] + '\')');
  }, 4000);

});

.slide_photo {
  position: relative;
  top: 30px;
  width: 100%;
  height: 200px;
  background-image: url('http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  transition: all .2s ease;
  -webkit-animation: fade 4s infinite;
  -moz-animation: fade 4s infinite;
  -o-animation: fade 4s infinite;
  animation: fade 4s infinite;
}
.slide_photo:hover {
  background-size: 110% auto;
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="slide_photo"></div>

- Dhiraj

---

这正是我一直在寻找的，Dhiraj，纯CSS魔法。谢谢！唯一的问题是有时新图像的淡入与图像更改不完全同步。因此，正在发生的是，在新的淡入中，仅在一秒钟内，先前的图像仍然可见。 - Andrew

随着幻灯片的播放时间越长，这个问题就越容易出现。：\ - Andrew

可能是因为JS和CSS中的4秒延迟不同。也许动画应该完全使用CSS或JS。 - Dhiraj

你能否在点击时执行CSS动画？ - Andrew

是的。将所有的CSS3动画移动到一个单独的类中。在点击处理程序中添加该类。 - Dhiraj