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
Can you help me out to do the fade out effect after the fade in completes?
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);
});
here is a good 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();
and here is the fiddle that shows it: http://jsfiddle.net/maniator/rcts4/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.