CODEWITHSUNDEEP
javascriptjqueryhtml
Dmitrii Mikhailov
Dmitrii Mikhailov

Reputation: 5231

Can't create simple text slides

I try to create simple slides for text and can't figure out why separate paragraphs start to show up. What i need is to change full div blocks with class text-block.

Here is the 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>

and js:

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

Link to jsFiddle: http://jsfiddle.net/e2wFK/

Upvotes: 0

Views: 60

Answers (1)

Itay
Itay

Reputation: 16785

You just need to change a selector to contain only direct children of #text-blocks

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

jsFiddle Demo

Your previous selector $('#text-blocks :first-child') was selecting every first child inside #text-blocks, including the first paragraphs inside .text-block elements.

Upvotes: 3

Related Questions