javascript - 以淡入淡出效果顺序显示文本列表

Question

我想按顺序显示以下文本列表，具有淡入/淡出效果，并最终显示图像并停在那里。我也很想在中心显示所有这些文本。

<div>a<div>
<div>b</div>
<div>c</div>
<div>d</div>
<div><img src="mypict.jpg" alt="my pict" /></div>

这是我所有的页面，我想把它做成一个介绍页面。我知道 jquery 有 fadein() 和 fadeout()，我试过 innerfade 插件。但它总是将文本放在左侧并无限循环。

Answer 1

将包含图像的最后一个 div 指定为“last”类:

<div class="last"><img src="mypict.jpg" alt="my pict" /></div>

$('div').each(function(){
   $(this).fadeIn('slow');

   if(!$(this).hasClass('last')){
      $(this).fadeOut('slow');
   }
});

如果您希望之后发生某些事情，您还可以在 fadeIn 和 fadeOut 中设置超时或回调函数。