Image grid morpher (MCDC)

by sanford

HTML

<div id="capsulecn" class="capsules">
    <div class="firstchild" ></div>
<div id="id1" class="nit capsule" style="background:maroon;">1</div>
<div id="id2" class="nit capsule" style="background:gold;">2</div>
<div id="id3" class="nit capsule">3</div>
<div id="id4" class="nit capsule">4</div>
<div id="id5" class="nit capsule" style="background:red;">5</div>
<div id="id6" class="nit capsule">6</div>
<div id="id7" class="nit capsule" style="background:green;">7</div>
<div id="id8" class="nit capsule">8</div>
<div id="id9" class="nit capsule">9</div>
<div id="id10" class="nit capsule">10</div>
<div id="id11" class="nit capsule">11</div>
<div id="id12" class="nit capsule">12</div>
</div>

CSS

* { font-family: Verdana; font-size: 11px; color:white;}
div.capsules {
    width: 980px;
    opacity: 1;
    margin: 0;
    transition: all 540ms ease-out;
    -moz-transition: all 540ms ease-out;
    -webkit-transition: margin 830ms ease-in, border 230ms ease-in, opacity 830ms ease, width 830ms ease-in;
}
div.capsule {
   margin: 2px 0 0 2px;
    text-align: center;
    height: 298px;
    width: 238px;
    float: left;
    opacity: 1;
    position: relative;
    background-color: black;
    -webkit-transition: margin 1130ms ease-out, opacity 1130ms ease;
}
div.capsules.explode div.capsule.hide, div.capsules div.capsule.hide {
    opacity: 0;
    margin-left: -238px; /* @ToDO make this for IE */
    margin-left: -250px; /* reverse margin - 12px */
    transition: all 830ms ease-in;
    -moz-transition: all 830ms ease-in;
    -webkit-transition: margin 830ms ease-out, opacity 1130ms ease;
    z-index: -1; /* ie */
}
div.capsules.explode {
    width: 1146px;
    margin: 12px 0 0 12px;
    -webkit-transition: margin 330ms ease-in, border 230ms ease-in, opacity 830ms ease;
}
div.capsules.explode div.capsule {
    ZZborder-bottom: 6px solid goldenrod;
    opacity: .2;
    margin: 10px;
    transition: margin 430ms ease-in, border 230ms ease-in;
    -moz-transition: margin 430ms ease-in, border 230ms ease-in;
    -webkit-transition: margin 430ms ease-in, border 230ms ease-in, opacity 330ms ease;
}

JavaScript

(function(){
    $('capsulecn').addClass('explode');
  $('id2').removeClass('nit').addClass('hide');
  $('id5').removeClass('nit').addClass('hide');
    $('id6').removeClass('nit').addClass('hide');
    $('id9').removeClass('nit').addClass('hide');
}).delay(600);


(function() {
   $('capsulecn').removeClass('explode');
}).delay(2600);


(function(){
    $('capsulecn').addClass('explode');
  //$('id2').removeClass('nit').addClass('slit');
  $('id5').removeClass('hide').addClass('nit');
    //$('id6').removeClass('nit').addClass('slit');
    //$('id9').removeClass('nit').addClass('slit');
}).delay(3600);

(function() {
    $('capsulecn').removeClass('explode');
}).delay(5600);