使用jQuery实现CSS背景图片过渡效果

Question

我尝试使用jQuery的fadeIn fadeOut函数创建一个简单的CSS背景图像过渡效果。我使用了jQuery页面上的描述来创建我的代码。现在，它的效果非常好，但我想要一种交叉淡入淡出的过渡效果。目前它只是从白色淡入淡出。以下是代码：

<script language="JavaScript" type="text/javascript">
   $(document).ready(function(){

   var imgArr = new Array( 
   'img/bg_1.jpg',
   'img/bg_2.jpg'
   );

   var preloadArr = new Array();
   var i;

   for(i=0; i < imgArr.length; i++){
   preloadArr[i] = new Image();
   preloadArr[i].src = imgArr[i];
   }

   var currImg = 1;
   var intID = setInterval(changeImg, 10000);

   function changeImg(){
      $('#head_bg').fadeOut('slow', function(){
      $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
      }).fadeIn('slow');
    }

  });
</script>

希望有人知道解决方案 :)

现在我尝试使用两个不同的背景类进行切换，得到了相同的结果。

新！新！新！新！新！

<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
   $('#head_bg').delay(4000).animate({opacity: 0}, 2000, function(){
      $('#head_bg').removeClass().addClass('bg2').animate({opacity: 1}, 2000);
   })
});
</script>

现在我有两种做同样事情的方法;)..但是仍然不知道如何使用两个单独的div，并使它们相互可见并旋转。很抱歉，但我不知道如何做到这一点...能否有人给我一个快速的示例呢？

- joe

Answer 1

jQuery中的转换效果适用于可以以数字设置的值。通过改变RGB值，您可以将一种颜色淡化为另一种颜色。通过使其不透明度减小，您可以淡入一张图像。 交叉淡入淡出两个背景图像是完全不同的事情。涉及的唯一CSS值是background-image属性，它是一个URL。jQuery通过淡出并淡入其他内容来优雅地解决了这个问题。

我能想到的最简单的方法是在彼此上方使用两个div。淡化顶部div的不透明度以使下面的div可见。根据图像的内容，这看起来不会太糟糕。

- Marnix van Valen

Answer 2

目前您正在使用回调函数来淡出并淡入新图像。

这只会在淡出完成后触发（因此是从淡出到白色，再从白色到图像的行为）。

您需要有另一个“层”，在第一个层之后预加载图像（从外观上看，您的HTML和CSS也需要进行修改），然后同时触发淡入和淡出。（只需将一个调用放在另一个调用后面即可）

- Nick Downton

---

正如Marnix所指定的那样，有一种简单的方法可以做到...使用两个div或两个图像标签...(position:absolute;)将它们放在彼此上面...这些图像应该具有相同的大小。在执行完这些操作之后...不要使用"setInterval"(Javascript)...如果您已经在使用Jquery-您可以使用.animation()---->来检查一下....例如：如果您想在这些图片上制作过渡效果，您可以更改不透明度参数(0.0-1)，而不是fadeIn/fadeOut...使用Jquery看起来会像这样： - BorisD

$("'#head_bg'").animate({"opacity": 0.0},3000); 这将在3秒钟（3000毫秒）内产生淡出效果。 - BorisD

Answer 3

现在我构建了一个解决方案，感谢您提示淡化两个div：

.bild {
  position:absolute;
  display:none;
  width:1000px;
  height:735px;
}

<div id="head_bg">
<div class="bild"><img src="img/bg_1.jpg" /></div>
<div class="bild"><img src="img/bg_2.jpg" /></div>
</div>

<script type='text/javascript'>
   $('.bild').hide();

   function bgSlide() {
     $(".bild").first().appendTo('#head_bg').fadeOut(5000);
     $(".bild").first().fadeIn(5000);

   setTimeout(bgSlide, 7000);
}
bgSlide();
</script>

但有一个小限制。我想让图像溢出屏幕而不创建滚动条。这就是为什么我使用了CSS背景图像标签。但现在对我来说，继续使用较小的图像完全没问题。

- joe