Question

I have a JavaScript script that will hopefully have multiple divs fade in/out every couple of seconds. Only one will be visible at once. I’ve created the following to do the job:

var tmnlSpDelay = 5000;
var $currentVis = null;

tmnlFadeIn = function ($re) {
    $re.css("display", "inline");
    $re.fadeIn('slow', "");
    $currentVis = $re;
    setTimeout("tmnlSpinner();", tmnlSpDelay);
}

tmnlSpinner = function () {
    var $random_elem = $('.topcontent').eq(Math.floor(Math.random() * $('.topcontent').length));
    if ($currentVis != null) {
        $currentVis.fadeOut('slow', "function() { tmnlFadeIn($random_elem) }");
    } else {
        tmnlFadeIn($random_elem);
    }
}

$(document).ready(function () {
    tmnlSpinner();
});

As you can see, I’m utilizing jQuery as well to help me. The problem is after it has ran once and runs tmnlSpinner again (except, because it has already run once, currentVis is no longer null). When it runs the fadeOut on $currentVis, it just stops working. Google Chrome isn’t giving me any feedback on any kind of error. Does anybody see any issues?

Answer 1

Remove the quotes around "function() { tmnlFadeIn($random_elem) }". You’re passing a string where you should pass a callback.