用jQuery动画div

Question

HTML

<div id="ModeliSadrzajAir">
  <div class="kocka220x300">

  </div>
  <div class="kocka220x300">

  </div>
  <div class="kocka220x300">

  </div>
  <div class="kocka220x300">

  </div>
</div>

I have 5 divs and they have css

#ModeliSadrzajAir
{
    width: 960px;
    margin: -60px 0px 30px -10px;
    min-height: 500px;
    z-index: 70;
    position: relative;
}

.kocka220x300
{
    border-radius: 5px;
    width: 220px;
    margin: 10px;
    height: 300px;
    float: left;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

If I transform first div width, last div goes down as expected but it doesn't have animation. How can I put animation on the other divs?

I have example on link http://jsfiddle.net/hrvojeBarbaric/Xsjdh/1/

Answer 1

Based on a bit of research I don't think this is possible without more extensive JavaScript. In essence you have to position the elements "absolute" then determine based on the new width/height of the first element, where the other elements belong. Finally, if you put this into another div you can make sure the height and width of that div moves other elements down on the page.

There are a few helper libraries that may do this for you. For example:

• http://razorjack.net/quicksand/
• http://isotope.metafizzy.co/
• http://masonry.desandro.com/

Hopefully this will put you on the right track. Best of luck!