jQuery fadeIn and fadeOut takes 50% of processor

Question

I have 135 html elements which I want to be faded in and out randomly, so I wrote this code for it:

setInterval(function() {
    ggg = Math.floor(Math.random() * (50 - 1 + 1) + 1);
    $("#f" + ggg).fadeIn(500, function() {  });
    $("#f" + ggg).fadeOut(500);
}, 300);


setInterval(function() {
    ggg = Math.floor(Math.random() * (100 - 50 + 1) + 50);
    $("#f" + ggg).fadeIn(500, function() {  });
    $("#f" + ggg).fadeOut(500); 
}, 300);

setInterval(function() {
    ggg = Math.floor(Math.random() * (135 - 100 + 1) + 100);
    $("#f" + ggg).fadeIn(500, function() {   });
    $("#f" + ggg).fadeOut(500);
}, 300);

But the problem is that it takes 50 percent of my i7 on Macbook Pro, even though there is no problem on a Windows laptop. Can someone rewrite the code for better performance?

You're calling them every 300ms but the animation takes 1 second, therefor you're looping and looping and looping and looping and.... before it even gets finished the 1st time. — Casey Dwayne, Jan 27 '14 at 23:42

score 0 · Answer 1 · answered Jan 27 '14 at 23:45

animate = function() {
  ggg = Math.floor(Math.random() * (100 - 50 + 1) + 50);
  $("#f" + ggg).fadeIn(500, function() {
  $("#f" + ggg).fadeOut(500,animate); 
  })
}
animate();

To delay, make this modification:

  $("#f" + ggg).delay(300).fadeOut(500,animate);

You could also use .stop(true,true) to clear the queue before starting another animation.

score 0 · Answer 2 · answered Jan 27 '14 at 23:46

$("#f" + ggg).animate({ opacity: 0 }, 500, function() {
    $("#f" + ggg).animate({ opacity: 1 }, 500)
});

Perhaps you're getting higher speed with animate, but idk. It's not uncommon for javascript to even slow down an i7 (perhaps browser related performance?)

score 0 · Answer 3 · answered Jan 27 '14 at 23:48

In addition to kicking off a 1-second animation every 300ms (which makes little sense), it also appears that you're expecting the fadeIn and fadeOut functions to run synchronously.

This code:

$("#f" + ggg).fadeIn(500, function() {  });
$("#f" + ggg).fadeOut(500);

Will start a half-second fade-in, then immediately overwrite it with a half-second fade-out. I'm not even sure what that does.

That empty function you pass to fadeIn is the callback to do when it's complete... thats where you want to put the fadeOut:

$("#f" + ggg).fadeIn(500, function() {
    $("#f" + ggg).fadeOut(500);
});

score 0 · Answer 4 · answered Jan 27 '14 at 23:51

My guess would be that the reason is the stacking of the animation calls.

You set a Interval which calls a function every 300 Milliseconds, which start 2 animations with a duration of of 500+500 Milliseconds.

Also you could do all 3 animation calls in one function. And maybe there might be a better way to select your object that you want to animate? Random might not be the most efficient way.

Maybe this might already do the trick (untested)

function animateStuff(){
    ggg = Math.floor(Math.random() * (50 -1 + 1) + 1);
    $("#f" + ggg).fadeOut(500, function(){
        $(this).fadeIn(500);
    });

    ggg = Math.floor(Math.random() * (100 -1 + 1) + 1);
    $("#f" + ggg).fadeOut(500, function(){
        $(this).fadeIn(500);
    });

    ggg = Math.floor(Math.random() * (135 -1 + 1) + 1);
    $("#f" + ggg).fadeOut(500, function(){
        $(this).fadeIn(500);
    });
}

setInterval(function(){
    animateStuff();
}, 1000);

score 0 · Answer 5 · edited May 23 '17 at 10:31

Give your elements a class, cache your elements, randomize your jQuery object and then fade them in and out.

var els = $(".random");
var $random = shuffleArray( els );

$random.each( function( ) {
    var max = 4000;
    var min = 1000;
    var duration = Math.floor( Math.random() * ( max - min + 1) + min );
    $(this).delay( duration ).fadeTo( 1000, 1, function( ) {
        $(this).delay( duration ).fadeTo( 1000, 0 );
    });
});

Shuffling function found here

/**
 * Randomize array element order in-place.
 * Using Fisher-Yates shuffle algorithm.
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

Fiddle here

jQuery fadeIn and fadeOut takes 50% of processor

5 Answers5