Question

我尝试使用jquery fadeIn fadeOut函数创建一个简单的css background-image转换。我使用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>

希望有人知道解决方案：）

现在我通过切换两个不同的背景类来改变它，提供相同的结果。

新!!! NEW !!! NEW !!! NEW !!! NEW !!!

<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可见。取决于图像的内容，看起来不应该太糟糕。

Answer 2

目前你在fadeOut上使用回调函数来淡化新图像。

只有在淡出完成后才会触发（因此淡化为白色，白色到图像行为）。

你需要有另一个“图层”，你预先将图像加载到第一个图层之后（从它的外观看你的html和css也需要修改）然后同时解雇fadein和fadeout。（只需在另一个电话之后坚持一个电话就可以了）

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>

但有一个小小的限制。我希望屏幕上没有装满scollbars的图像。这就是我使用css background-image标签的原因。但是对于我来说，继续使用较小的图像绝对没问题。

使用jquery进行css background-image转换

3 个答案: