淡入和淡出隨機使用jQuery

Question

最近有人問我這樣做的效果

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

，但它與scriptaculus量身定做的，我需要以某種方式使用jQuery來實現它。

，我發現這個例子，但它是中途

http://jsfiddle.net/5rkEw/

你能不能幫我在完成褪色後做淡出效果？

Answer 1

我在放在一起小提琴的中間，但你可以試試這個使用similiar標記作爲例子，你給

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

這裏是一個很好的解決方案：

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(); 

這裏是展示它的小提琴：http://jsfiddle.net/maniator/rcts4/