javascript - 循环上的 Fadein 和 FadeOut Div 工作正常 - 但不显示第一个 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 是错误的，请使用类而不是 id。

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

Javascript：

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