Question

I’m trying to execute two different functions at the exact same time.

I have a row of images, and one after the other they light up by changing their opacity, to make it look like they’re blinking. Problem is that the timing needs to be exact, and with the few milliseconds of difference, after a minute or two it just looks like a mess.

    <img src="img1" class="1" /><img src="img2" class="2" /><img src="img3" class="3" />

    <script type="javascript">
    setTimeout(function blinkone(){$('.1').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinkone);},1000)

    setTimeout(function blinktwo() {$('.2').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinktwo);},2000)

    setTimeout(function blinkthree() {$('.3').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinkthree);},3000)
    </script>

How can I execute multiple functions at the exact same time?

Answer 1

You could also chain the callbacks recursively, which is a lot cleaner IMO:

function display(number){
    number = number || 1
    $('.'+ (number % 3 + 1)).delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, function(){display(++number);});
}

This also scales well, so you don’t have to add 100 lines of code to add the effect to 100 images.

Here is a demonstration: http://jsfiddle.net/8cwA6/1/

I’m not entirely sure, but maybe the effect you want is more like this fiddle: http://jsfiddle.net/8cwA6/2/