[英]fade in and fade out random with jquery
最近我被要求做這種效果
http://mobile.bebitalia.com/home.do
但是它是用scriptaculus制成的,我需要某種方式才能使用jquery實現它。
我找到了這個例子,但這是半途而廢
淡入完成后,您能幫我做出淡出效果嗎?
我正在整理小提琴,但是您可以使用類似的標記作為示例來嘗試
// 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);
});
這是一個很好的解決方案:
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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.