Fadein＆amp; 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());