Question

I have a problem making a server side generated code(<php ?>) div fade in and out.

I query a database and return six rows that I place in a div.
Normally the div will be duplicated six times because of the while clause in the mysql query.
The problem here is that i want the six divs to fade in and fadeout at different timing.
It does not matter which one fades in first, as long as the six dynamically generated divs fade in randomly at different times.

I know this will be jquery or javascript to which I am a newcomer.

Answer 1

Something like:

function fadeRandom($divI) { // make a function we can re-use
    window.setTimeout(function() { // do this next stuff after a short break
        $divI.fadeIn(100, function(){ // fade $divI in, then ...
            $divI.fadeOut(100, function() { // fade $divI out, then ...
                fadeRandom($divI); // start the whole cycle over
            }
        }, Math.random(100) * 100); // do that after 1-100ms
    });
}
for (var i = 0; i++; i < 6) { // go through all 6 divs and ...
    fadeRandom($('#div_' + i)); // get the fade cycle started
}

should work. That’s untested code, and you’ll likely want to tweak the numbers, but hopefully it gives you a basic idea.