title: Trouble Displaying Words in Sequence In JQuery and JavaScript
body: <p>I have been trying to make a simple word sequence display program in jQuery. I want to achieve a simple program that can take sentence as input and its output can be displayed in sequence of words. </p>
  
  <p>Now how can I make this program show these words in sequence like below </p>
  
  <pre><code> &lt;div class="bar"&gt;One Two &lt;/div&gt;  //(hide it after few seconds and show next line)
   &lt;div class="bar"&gt;Three Four &lt;/div&gt; //(hide it after few seconds and show next line)
   &lt;div class="bar"&gt;Five Six &lt;/div&gt; //(hide it after few seconds and show next line)
   &lt;div class="bar"&gt;Seven &lt;/div&gt; //(hide it after few seconds)
  </code></pre>
  
  <p>The number of words displayed at a time in sequence can be configured using wordCount var in my program</p>
  
  <p><a href="http://jsfiddle.net/kzvikzvi1/9T4HE/12/" rel="nofollow">My Program at JSFiddle</a></p>
  
  <p>I have tried a lot of options on this and its always displaying the last word "Seven" in the div. The animation seems to work right amount of time, that makes me think it has to do with the way JS handles delay in animations.</p>
  
  <p>I guess this goes back to the clear understanding of few things Not sure how JavaScript is handing the delay here.</p>
  
  <p>I have tried following but did not work 
  - setTimeout - calling the function with a delay
  - jQuery.delay() call </p>
  
  <p>When I put the console.log messages it does show me all the words in sequence however the div always contains the last word. </p>
  
  <p>I guess JavaScript is not waiting for the animations to complete and the last word reaches too soon and animation continues later. </p>
  
  <p>I guess the main line of code to look at would be </p>
  
  <pre><code>    $('.bar').fadeIn(1000).text(displayWords).fadeOut(1000);
  </code></pre>
  
  <p>Any help and insight on this would be greatly appreciated.</p>