CSS3 transition fails to animate when inside setInterval

Question

I'll start off by saying I have gotten this to work using JQuery .animate, but I'd like to increase performance and try using CSS3 transitions.

When I added "transition: opacity 0.6s;" to the label and used jquery to change the css value, the words were properly generating but the fade animation disappeared. The original JQuery method looked like this:

start 4 animations to opacity:0
for loop that generates 4 new words inside a setTimeout
start 4 animations to opacity:1

The thing I found odd was that the animations only started working after I completely commented out the setTimeout and setInterval. Having either of these in there made it stop working. This strikes me as odd, because their use here is unrelated (afaik). I googled around and have seen people mentioning these functions in relation to css3 transitions, but I have been unable to find anything that explains what could be going on here.

function printWords() {
    var words = ["list","of","random","words"];

    var selectors = ['div#northSlogan', 'div#eastSlogan', 'div#southSlogan', 'div#westSlogan'];

    /* populate array with numbers 0 through # of elements in 'words' array */
    var nums = [];
    for (var i=0; i < words.length; i++) {nums[i] = i;}

    /* fade out all slogan divs */
    for(var i=0; i < 4; i++) {
        //$(selectors[i]).animate({opacity:0}, 600);
        $(selectors[i]).css({opacity: 0});
    }

    /* generate random index and fill slogan div with chosen text */
    //setTimeout(function() {
        for (var i=0; i < 4; ++i) {
            var index = Math.floor(Math.random()*nums.length);
            document.querySelector(selectors[i]).innerHTML = words[nums[index]];
            nums.splice(index, 1);
        }
    //}, 600);

    /* fade in all slogan divs */
    for(var i=0; i < 4; i++) {
        //$(selectors[i]).animate({opacity:0.5}, 600);
        $(selectors[i]).css({opacity: 1});
    }
}

printWords();
setInterval(printWords, 5000);

So my question is, what is it about the setInterval and setTimeout functions that is interfering with these transitions? Is what I'm doing possible, or am I going about it in completely the wrong way?

PS: I originally had the setTimeout function there so the word generation would happen after the animate to opacity:0 had occurred, else you could see the change happen before the fade had begun. Because I was starting 4 animations at the same time, I didn't want to use a callback inside the for loop.

You were 100% right. A fiddle could help. The problem was that both animations were running at the same time, resulting in nothing happening. This is what happens when you don't take breaks all day. Thanks for your help in pointing out my oversight. — Scott C

sabithpocker sabithpocker · Accepted Answer · 2013-08-07T23:57:45

Are you looking for something like this? http://jsfiddle.net/dJQ5t/

    var selectors = ['div#northSlogan', 'div#eastSlogan', 'div#southSlogan', 'div#westSlogan'];
    var words = ["list","of","random","words"];
function printWords() {

    /* populate array with numbers 0 through # of elements in 'words' array */
    var nums = [];
    for (var i=0; i < words.length; i++) {nums[i] = i;}

    /* fade out all slogan divs */
    for(var i=0; i < 4; i++) {
        $(selectors[i]).removeClass('opaque');
    }

    /* generate random index and fill slogan div with chosen text */
    setTimeout(function() {
        for (var i=0; i < 4; ++i) {
            var index = Math.floor(Math.random()*nums.length);
            document.querySelector(selectors[i]).innerHTML = words[nums[index]];
            nums.splice(index, 1);
        }
        /* fade in all slogan divs */
        for(var i=0; i < 4; i++) {
            $(selectors[i]).addClass('opaque');    
        }
    }, 600);


}

printWords();
setInterval(printWords, 5000);

div#northSlogan,div#eastSlogan,div#southSlogan,div#westSlogan{
    opacity:0;
    transition: opacity 0.6s;
}
.opaque{
    opacity: 1 !important;
}

CSS3 transition fails to animate when inside setInterval

1 Answers