Question

Recently i was asked to do this effect

http://mobile.bebitalia.com/home.do

but it is made with scriptaculus and i need somehow to achieve it using jquery.

i found this example but it is the half way

http://jsfiddle.net/5rkEw/

Can you help me out to do the fade out effect after the fade in completes?

Answer 1

I’m in the middle of putting together a fiddle but you can try this using similiar markup as the example you gave

// Translated from scriptaculus
// http://mobile.bebitalia.com/home.do

function hideCube() {
$('#gctu1w_bg').show('slow');
$('.cube').each(function(index, element) {
    var sleepTime = Math.floor(Math.random() * 2000);
    var t = setTimeout(function() {
        var d = Math.floor(Math.random() * 2000);
        $(element).fadeTo(d, 0);
    }, sleepTime);
});
}

$(function() {

$('.cube').each(function(index, element) {
    var sleepTime = Math.floor(Math.random() * 2000);
    var t = setTimeout(function() {
        var d = Math.floor(Math.random() * 1000);
        $(element).fadeTo(d, 0.99);
    }, sleepTime);
});

var h = setTimeout(hideCube, 4000);

});

http://jsfiddle.net/nickywaites/GBhMw/