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

在old.nabble.com

上，通过此页面进行了大量的复制粘贴

$(function() {
   var $sequence = $('div').hide(), div = 0;
   (function(){
       $($sequence[div++]).fadeIn('slow', arguments.callee);
   })();
});

使用CSS将div放在中心（水平）：

div {margin：0 auto;宽度：50％; text-align：center; }

定义了

Width，因为块元素 - div - 否则会占据整个水平空间。 text-align: center;是您希望文本在div中居中。

Answer 2

给包含图像的最后一个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中设置Timeouts或回调函数。

使用淡入和淡出效果顺序显示文本列表

2 个答案: