将不同的 div 更改为背景图像 jQuery Fade

Question

我在 jQuery 方面有点业余，但我设法提出了四个相互淡入和淡出的 div。虽然这可以正常工作，但我想用一个 div 替换当前的四个 div，并淡入该 div 的不同背景图像，而不是淡化四个 div。

所以我在一个 div 中淡化四个背景图像，而不是淡化四个单独的 div。

我现在拥有的当前代码：

jQuery：

<script type="text/javascript">
$(document).ready(function() {
    function fade($ele) {
        $ele.fadeIn(1000).delay(4000).fadeOut(1000, function() {
            var $next = $(this).next('.HomeImage');
            fade($next.length > 0 ? $next : $(this).parent().children().first());
       });
    };  

    fade($('div#stretchParent > .HomeImage').first());
}); 
</script>

HTML：

<div id="stretchParent"><!-- Stretch -->
    <div class="HomeImage"></div>
    <div class="HomeImage"></div>
    <div class="HomeImage"></div>
    <div class="HomeImage"></div>
</div><!-- End of Stretch -->

因此，我希望与四个渐变 div 一起使用的所需 HTML 是：

<div id="stretchParent"><!-- Stretch -->
    <div class="HomeImage"></div>
</div><!-- End of Stretch -->

任何想法或帮助，因为我完全被难住了，是我和一个朋友写了 jQuery。

提前感谢任何方向、链接或帮助。

Answer 1

好的，试试看http://jsfiddle.net/davidja/Wzcgn/11/

$(document).ready(function () {

    var $backgroundimages = ['blue', 'red', 'grey', 'black'];
    var $backgroundcount = 0;

    function fade($ele) {
        $ele.css('background-color', $backgroundimages[$backgroundcount]);
        $backgroundcount++;
        $ele.fadeIn(1000).delay(4000).fadeOut(1000, function () {
            if ($backgroundcount >= $backgroundimages.length) {
                $backgroundcount = 0;
            };
            fade($ele);
        });
    };

    fade($('#stretchParent  .HomeImage').first());
});

要使用图像而不是如下所示（未经测试）；

var $backgroundimages = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg'];

$ele.css('background-image', 'url('+$backgroundimages[$backgroundcount]+')');