Hide random cubes
HTML
<div id="gctu1w_bg" class="bgImage"></div>
<div class="home-animation" id="gctu1w_animation">
<div class="cube" id="cube_1"></div>
<div class="cube" id="cube_2"></div>
<div class="cube" id="cube_3"></div>
<div class="cube" id="cube_4"></div>
<div class="cube" id="cube_5"></div>
<div class="cube" id="cube_6"></div>
<div class="cube" id="cube_7"></div>
<div class="cube" id="cube_8"></div>
<div class="cube" id="cube_9"></div>
<div class="cube" id="cube_10"></div>
<div class="cube" id="cube_11"></div>
<div class="cube" id="cube_12"></div>
<div class="cube" id="cube_13"></div>
<div class="cube" id="cube_14"></div>
<div class="cube" id="cube_15"></div>
<div class="cube" id="cube_16"></div>
<div class="cube" id="cube_17"></div>
<div class="cube" id="cube_18"></div>
<div class="cube" id="cube_19"></div>
<div class="cube" id="cube_20"></div>
<div class="cube" id="cube_21"></div>
<div class="cube" id="cube_22"></div>
<div class="cube" id="cube_23"></div>
<div class="cube" id="cube_24"></div>
<div class="cube" id="cube_25"></div>
<div class="cube" id="cube_26"></div>
<div class="cube" id="cube_27"></div>
<div class="cube" id="cube_28"></div>
<div class="cube" id="cube_29"></div>
<div class="cube" id="cube_30"></div>
<div class="cube" id="cube_31"></div>
<div class="cube" id="cube_32"></div>
<div class="cube" id="cube_33"></div>
<div class="cube" id="cube_34"></div>
<div class="cube" id="cube_35"></div>
<div class="cube" id="cube_36"></div>
<div class="cube" id="cube_37"></div>
<div class="cube" id="cube_38"></div>
<div class="cube" id="cube_39"></div>
<div class="cube" id="cube_40"></div>
</div>
CSS
.home-animation .cube
{
background-color: #fff;
display: block;
float: left;
height: 99px;
margin: 0 1px 1px 0;
opacity: 0;
width: 99px;
}
.bgImage, .home-animation
{
background-position: left top;
background-repeat: no-repeat;
height: 400px;
left: 0;
margin: 0 auto;
position: absolute;
top: 0;
width: 1000px;
z-index: -1;
}
.bgImage
{
display: none;
background-color: orange;
}
JavaScript
// Translated from scriptaculus
// http://mobile.bebitalia.com/home.do
$(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);
});