Hi Guys,

First time posting here. I'm fairly new to Javascript, in general, so I'm not really great at figuring out the problems. I have been trying to figure out this problem for hours and hours:

Basically, I have a box-shadow effect on a circle that needs to pulsate at random intervals. It needs to "appear" and then "fade" out with a ~5 sec. sustain between the two actions. The appear/fade effect should last a few seconds as well. Obviously, the effects should happen, and then loop and do it again at a random time.

However, the problem I'm having is that it appears just fine, but when it fades, sometimes it looks like it's being cut off. I would like it to be a smooth transition, and have it complete its fade out effect.

Here is what I have:

Code:
function circleOneGlow() {}

(function loop() {
    var rand = Math.round(Math.random() * (14000 - 9500)) + 3500;
    setTimeout(function() {
			$('circle1back').appear({ duration: (Math.random() * 2) + 1});
				setTimeout(function(){
					$('circle1back').fade({ delay: (Math.random() * (7 - 2)) + 1, duration: (Math.random() * 2) + 1});
				}, 3000);
            loop();  
    }, rand);
}());
Any help would be much appreciated. It's been driving me mad. Also, an explanation of what is wrong would be really helpful to help me learn from my mistakes.

Thanks,
Necronar