0

テキスト用の簡単なスライドを作成しようとしていますが、なぜ個別の段落が表示され始めるのかわかりません。私が必要としているのは、class text-block を使用して完全な div ブロックを変更することです。

html は次のとおりです。

<div id="text-blocks">
  <div class="text-block">
    <p>paragraph1</p>
    <p>paragraph2</p>
  </div>
  <div class="text-block">
    <p>paragraph3</p>
    <p>paragraph4</p>
    <p>paragraph5</p>
    <p>paragraph6</p>
    <p>paragraph7</p>
  </div>
</div>

そしてjs：

$(document).ready(function(){
  $('.text-block:gt(0)').hide();
  setInterval(function(){
    $('#text-blocks :first-child').fadeOut()
      .next().fadeIn()
      .end()
      .appendTo('#text-blocks');
  },
  3000);
})

jsFiddle へのリンク: http://jsfiddle.net/e2wFK/

4

1 に答える 1

3

の直接の子のみを含むようにセレクターを変更するだけです。#text-blocks

$('#text-blocks > :first-child').fadeOut()

jsFiddle Demo

以前のセレクターは、要素内の最初の段落を含め、$('#text-blocks :first-child')内のすべての最初の子を選択していました。#text-blocks.text-block

于 2013-09-05T08:04:03.547 に答える