UI effect boxes animated css opacity - Jquery

UI effect boxes animated css opacity - Jquery

by Andrew Pougher

HTML

<div id="parent_container">
    <div class="block-item">1</div>
    <div class="block-item">2</div>
    <div class="block-item">3</div>
    <div class="block-item">4</div>
    <div class="block-item">5</div>
    <div class="block-item">6</div>
    <div class="block-item">7</div>
    <div class="block-item">8</div>
    <div class="block-item">9</div>
    <div class="block-item">10</div>
    <div class="block-item">11</div>
    <div class="block-item">12</div>
    <div class="block-item">13</div>
    <div class="block-item">14</div>
    <div class="block-item">15</div>
    <div class="block-item">16</div>
    <div class="block-item">17</div>
    <div class="block-item">18</div>
</div>

CSS

body {
    background:#eee;
    padding:20px
}
.block-item {
    width:50px;
    height:50px;
    margin:0px 10px 10px 0px;
    display:block;
    float:left;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    border:1px solid #fff;
    padding:12px;
    background:#fff;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.4);
}

JavaScript

var delay = 0;
$('.block-item').css({
    'opacity': '0'
});
$('.block-item:lt(16)').each(function () {
    $(this).delay(delay).animate({
        opacity: 1.0
    }, 200);
    delay += 200;
});