Fadein 和 FadeOut Divs on Loop 工作正常 - 但不显示第一个 DIV

Question

好的，我有3个div渐变但是第一个div不工作也不渐变，知道为什么吗?我觉得我的代码都是正确的?

jQuery/Javascript:

<script type="text/javascript">
$(document).ready(function() {
    function fade($ele) {
        $ele.fadeOut(1000).delay(4000).fadeIn(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 id="HomeImage"></div>
    <div id="HomeImage"></div>
    <div id="HomeImage"></div>
</div><!-- Stretch End -->

我似乎解不出来。

Answer 1

在页面上使用多个相同的id是错误的，请使用class代替id。

<div id="stretchParent">
    <div class="HomeImage"></div>
    <div class="HomeImage"></div>
    <div class="HomeImage"></div>
</div>

Javascript:

fade($('div#stretchParent > .HomeImage').first());