javascript - .fadeIn() 和 .fadeOut() 在 for 循环中不起作用

Question

我想要与 http://jsfiddle.net/8nqkA/2/ 中完全相同的功能(有人编码)

所以，我尝试了类似 http://jsfiddle.net/c78oLbg2/4/ 的东西

我不明白我的代码哪里出错了。可能有一些非常琐碎的事情，我不知道，因为我是这里的新手:

no_of_p = $('div#mydiv p').length;
for (i = 0; i < no_of_p; i++) {
    $('div#mydiv p:eq(i)').fadeIn(1000);
    $('div#mydiv p:eq(i)').fadeOut(1000);
};

#mydiv p {
    position: absolute;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mydiv">
    <p>para 1</p>
    <p>para 2 </p>
    <p>para 3</p>
</div>

Answer 1

您的变量未在字符串中解释。如果要将变量值添加到字符串中，则需要字符串连接。就像那样:

$('div#mydiv p:eq('+i+')').fadeIn(1000);
$('div#mydiv p:eq('+i+')').fadeOut(1000);

但是使用 jQuery 提供的函数会更容易，比如 .each:

$('div#mydiv p').each(function(){
    $(this).fadeIn(1000).fadeOut(1000);
});

这就是淡入淡出不起作用的原因

---

不要使循环淡出，您应该制作一个递归函数，使第一个元素淡出并使用减去第一个元素的同一组元素调用自身。该代码完成了:

recursiveFade($('div#mydiv p'));

function recursiveFade($el){
    $el.first().fadeIn(1000).fadeOut(1000, function(){
        recursiveFade($el.slice(1));
    })
}

#mydiv p {
    position: absolute;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mydiv">
    <p>hi</p>
    <p>how are you </p>
    <p>bye</p>
</div>