2


0

フェードインおよびフェードアウト効果を使用してテキストのリストを順番に表示する

次のテキストリストを順番に表示し、フェードイン/アウト効果で表示し、最終的に画像を表示してそこで停止したいと思います。 また、これらすべてのテキストを中央に表示したいと思います。

a
b
c
d

これがページのすべてです。イントロページとして作成します。 jqueryにはfadein()とfadeout()があり、innerfadeプラグインを試しました。 ただし、テキストは常に左側に配置され、無限にループします。

2 Answer


0


このページのhttp://old.nabble.com/How-to-fade-in-next-div-after-previous-div-faded-in-upon—​document.ready-- -td21109378s27240.html [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; }

それ以外の場合、ブロック要素(「div」)が水平スペース全体を占めるため、「幅」が定義されます。 `text-align:center;`は、div内でテキストを中央に配置する場合です。


0


画像を含む最後のdivに「last」のクラスを与えます:

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

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

また、後で何かを実行したい場合は、fadeInおよびfadeOut内でsetTimeoutsまたはコールバック関数を設定できます。