jquery - 使用 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 来做到这一点，并使它们相互可见并旋转它。抱歉，我不知道如何……有人可以给我一个简单的例子吗？

Answer 1

jQuery 中的过渡效果适用于可以数字设置的值。您可以通过更改 RGB 值将一种颜色淡化为另一种颜色。您可以通过降低透明度来使图像淡入淡出。 交叉淡入淡出两个背景图像是完全不同的。唯一涉及的 CSS 值是 background-image 属性，它是一个 URL。 jQuery 实际上通过淡出和淡入另一个很好地解决了这个问题。

我能想到的最简单的事情就是在彼此之上使用两个 div。淡出最顶层 div 的透明度，使底部 div 可见。根据图像的内容，看起来应该不会太差。