背景图像淡入淡出jquery

Question

我有一个 div，我想随机淡入和淡出 5 个不同的背景图像。

我为此下载了一个 jquery 插件，但不幸的是它是交替的 - 我会解释。

您必须设置默认背景图像（在本例中假设为“image1”），然后加载图像数组（假设为 image2、image3、image4 和 image5）。该插件的作用是复制 div 并将其直接放置在原始 div 上，然后淡入然后淡出图像数组之一。我从中得到的不良效果是：

1,2,1,3,1,4,1,5

而不是：

1,2,3,4,5

因为淡出简单会显示默认图像一次再次。

在不重新发明轮子的情况下，有没有办法修改代码，以便当淡入动画完成时（默认是完全隐藏的）我交换背景div上的图像，以便当淡出开始时有一个新的下图？我对 JQuery 比较陌生，所以这不是我的强项。

这是插件的操作部分：

var tempImage = new Image();

jQuery(tempImage).load( function(){
    var newImage = ( helperElement.css('display') == 'block' ) ? jQuery(this) : jQuery(helperElement);
    newImage.css('backgroundImage', 'url('+tempImage.src+')');
    helperElement.animate( settings.effect, settings.duration, settings.easing, settings.callback );
});

tempImage.src = src;

在我的 HTML 中：

<script>
    document.getElementById('content_container_home').style.backgroundImage = "url('img/buttons.jpg')";
    $( function(){
        var bgImages = [ 'barker.jpg', 'boards.jpg', 'feet.jpg', 'glasses.jpg' ];
        var currImage = 'buttons.jpg';
        setInterval( function(){
            do{
                var randImage = bgImages[Math.ceil(Math.random()*(bgImages.length-1))];
            }while( randImage == currImage )
                currImage = randImage;
             $('#content_container_home').BgImageTransition( 'img/'+currImage );
            }, 5000)
    });
</script>

Answer 1

查看我对另一个问题的回答

这应该可以解决问题：

HTML：

<div id="testers">
  <div class="tester">
      <img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
  </div>
</div>
<div id="morework">
  <div class="holderdiv">
    <div class="tester">
      <img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
    </div>
  </div>
   <div class="holderdiv">
    <div class="tester">
      <img src="http://jsfiddle.net/favicon.gif" alt="" />
    </div>
  </div>   
</div>

CSS ：

#morework{display:none;}

jQuery：

 $(document).ready(function(){
   function runIt(){
     $('#morework').find('.holderdiv').each(function(i, elem) {
       $("#testers").delay(5000).fadeOut(1000, function() {
         $(this).html($(elem).html());
       }).fadeIn(1000, runIt);
     });
   };
   runIt()
 });

在此处查看实际操作 - http://jsfiddle.net/sfsPx/