Question

I’m converting some JavaScript code to jQuery and have come to a halt,
Heres the code…

HTML:

<div id="text"></div>

JavaScript:

keywords = [ "one", "two", "three"]
var allowed = true;
function ChangeText ( ) {
   if(allowed)
   {
      var keyword = keywords[ Math.floor( Math.random() * keywords.length ) ]
      document.getElementById( "text" ).innerHTML = keyword;
   }
   setTimeout( "ChangeText()", switchTime );
} 
ChangeText();

jQuery:

var changeAllowed = true;
$(document).ready(function ChangeText() {
   if(changeAllowed)
   {
      $("#text").fadeOut(500);
      var keyword = keywords[ Math.floor( Math.random() * keywords.length ) ];
      $("#text").text(keyword).fadeIn(1000);
   };
   setTimeout( "ChangeText()", 2000 );
});
ChangeText();

What it should do is fade the text out then back in with a new string (which it does on refresh) every 2 seconds or so, The jQuery effects are working, it just seems to be the setTimeout() or I’ve not named the function properly.

Answer 1

UPDATE

My first solution got out of synch when the display queue got behind. Here is updated code that uses callbacks so the timing is always right, along with the test fiddle:

var changeAllowed = true;
var keywords = ["test1", "test2", "test3", "test4", "test5"];
var hide = true;

var toggleTextFade = function() {
    if(changeAllowed) {
        var keyword =keywords[Math.floor(Math.random() * keywords.length)];

        $("#text").text(keyword).fadeIn(1000,null,function(){
            $("#text").fadeOut(500,null,toggleTextFade)});
    }               
};


$(document).ready(toggleTextFade);