Monday, 19 August 2013

Timing for loop changes when using other functions in the computer Jquery

Timing for loop changes when using other functions in the computer Jquery

I have a pulsing animation in this JSFiddle
http://jsfiddle.net/upBdw/8/
When you use it on its own, it works just fine. The problem I'm having is
when I start browsing the web, open iTunes or whatever else you would do
while that window is still open, the timings of the pulses start to
fluctuate.
The function for the pulses is this:
function fadeItIn() {
window.setInterval(function(){
// Fade Ins
$('#child4,#child4C').fadeIn(175);
setTimeout(function () {
$('#child3,#child3C').fadeIn(175);
}, 175);
setTimeout(function () {
$('#child2,#child2C').fadeIn(175);
}, 350);
setTimeout(function () {
$('#child1,#child1C').fadeIn(175);
}, 525);
setTimeout(function () {
$('#child,#childC').fadeIn(175);
}, 700);
// Fade Outs
setTimeout(function () {
$('#child,#childC').fadeOut(175);
}, 875);
setTimeout(function () {
$('#child1,#child1C').fadeOut(175);
}, 1050);
setTimeout(function () {
$('#child2,#child2C').fadeOut(175);
}, 1225);
setTimeout(function () {
$('#child3,#child3C').fadeOut(175);
}, 1400);
setTimeout(function () {
$('#child4,#child4C').fadeOut(175);
}, 1575);
}, 3000);
};
I feel like the issue is happening during the 3 second interval within the
function. I need the pulses to repeat, so I need it in there.
What do you all think is causing this problem and how can I fix it?

No comments:

Post a Comment