fade in et fade out aléatoire avec jquery

Question

Récemment, on m'a demandé de faire cet effet

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

mais elle est faite avec scriptaculus et j'ai besoin d'une certaine manière pour y parvenir en utilisant jquery.

je trouve cet exemple, mais il est mi-chemin

http://jsfiddle.net/5rkEw/

Pouvez-vous me aider à faire le fondu effet après le fondu à la fin?

Answer 1

Je suis en train de mettre sur pied un violon, mais vous pouvez essayer en utilisant un balisage similaire comme l'exemple que vous avez donné

// 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/

Answer 2

est ici une bonne solution:

fadeInout = { 
    init: function() { 
     v = $("#blocks > li").css('visibility', 'hidden'), 
     cur = 0, 
     rem = 0; 
     for (var j, x, i = v.length; i; 
      j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x); 
     //other startup code 
     return this; 
    }, 

    fades: function() { 
     this.fadein(); 
    }, 
    fadein: function() { 
     v.eq(cur++).css('visibility', 'visible').hide().fadeIn(); 
     if (cur != v.length) setTimeout(fadeInout.fadein, 50); 
     else setTimeout(fadeInout.fadeout, 100); 
    }, 
    fadeout: function() { 
     v.eq(rem++).css('visibility', 'none').fadeOut().show(); 
     if (rem != v.length) setTimeout(fadeInout.fadeout, 50); 
    } 

} 

fadeInout.init().fades(); 

et est le violon ici que le montre: http://jsfiddle.net/maniator/rcts4/