CODEWITHSUNDEEP
javascriptjqueryhtmlanimation
Miljan Ilic
Miljan Ilic

Reputation: 55

Show sentences word by word. Only one sentence displayed

I have a following code:

var P = $('.sentences > p');

P.hide().contents().each(function() {
    var Words;
    if (this.nodeType === 3) {
        Words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>';
        $(this).replaceWith(Words);
    } else if (this.nodeType === 1) {
        this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';
    }
});

P.find('span').hide().each(function() {
    if( !$.trim(this.innerHTML) ) {
        $(this).remove();
    }
});

P.show().find('span').each(function(I) {
    $(this).delay(200 * I).fadeIn(800);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sentences">
  <p>This is only a simple paragraph #1</p>
  <p>This is only a simple paragraph #2</p>
  <p>This is only a simple paragraph #3</p>
  <p>This is only a simple paragraph #4</p>
  <p>This is only a simple paragraph #5</p>
</div>

It displays sentences from div element word by word. Now I want to edit this code and make it displays only one sentence at the moment.

So it will look like this:

  1. First Sentence is displayed word by word.
  2. 1 second delay.
  3. First sentence is hidden.
  4. Second sentence is being displayed word by word.

Upvotes: 0

Views: 752

Answers (1)

void
void

Reputation: 36703

You just need to iterate on all the P's and include a setTimeout to show it. Delay you need to calculate for the setTimeout is described below.

Inside this show the current P, hide its siblings and start animating the spans it has.

var delay = 0;
// Iterate over all the P's
P.each(function(){
  // You need an IIFE to pass correct 'this'
  (function(that){
    // Add a setTimeout to hide/show P's
    setTimeout(function(){
      // Show current P and hide all of its siblings
      $(that).show().siblings().hide();
      // This is what you already had
      $(that).find('span').each(function(I) {
          $(this).delay(200 * I).fadeIn(800);
      });
    }, delay);
  })(this);
  // Delay is past delay + time to fade in all the spans + 1 sec break
  delay = delay+($(this).find('span').length+1)*200+1000;
});


var P = $('.sentences > p');

P.hide().contents().each(function() {
    var Words;
    if (this.nodeType === 3) {
        Words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>';
        $(this).replaceWith(Words);
    } else if (this.nodeType === 1) {
        this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';
    }
});

P.find('span').hide().each(function() {
    if( !$.trim(this.innerHTML) ) {
        $(this).remove();
    }
});

var delay = 0;
// Iterate over all the P's
P.each(function(){
  // You need an IIFE to pass correct 'this'
  (function(that){
    // Add a setTimeout to hide/show P's
    setTimeout(function(){
      // Show current P and hide all of its siblings
      $(that).show().siblings().hide();
      // This is what you already had
      $(that).find('span').each(function(I) {
          $(this).delay(200 * I).fadeIn(800);
      });
    }, delay);
  })(this);
  // Delay is past delay + time to fade in all the spans + 1 sec break
  delay = delay+($(this).find('span').length+1)*200+1000;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sentences">
  <p>This is only a simple paragraph #1</p>
  <p>This is only a simple paragraph #2</p>
  <p>This is only a simple paragraph #3</p>
  <p>This is only a simple paragraph #4</p>
  <p>This is only a simple paragraph #5</p>
</div>

Upvotes: 2

Related Questions