Smooth text animation in JavaScript

Question:

I got a problem. When executing this code (and it is disgustingly awful), as I understand it, first the variable x is calculated 6 times, and then 6 times the animation of 1 word from the array.

Is it possible to make the generator produce random words with normal animation?

var words = ["Helloo!", "How_are_you?", "OK", "LOL!", "What?", "DHSADHSADA", "SCHOOL - NO LIFE"];
var i = 0;
var x = 0;

while (i < 6) {
  title();
  setTimeout(title, 2000);
  i++;
}

function title() {
  x = random(0, 8);
  document.getElementById("h1").innerHTML = words[x];
}

function animation() {
  $("#h1").fadeIn(1000);
  $("#h1").fadeOut(1000);
}

function word(){
  document.getElementById("h1").innerHTML= words[x];
}

function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

<br>
<h1 id="h1">Hello!</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer:

Like this for example: http://jsfiddle.net/L43suw2d/

var words = ["Helloo!", "How_are_you?", "OK", "LOL!", "What?", "DHSADHSADA", "SCHOOL - NO LIFE"];
var $test = $(".test");

function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

function getRandomWord () {
  	var num = getRandom(0, words.length - 1);
    return words[num];
}

function change () {
  $test.fadeOut(450, function () {
      $test.text(getRandomWord());
      $test.fadeIn(450);
  });
  
  setTimeout(change, 1000);
}

$test.html(getRandomWord());
change();

<h1><span class="test"></span></h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Post Views: 2