Comment jquery animer un fly-in vertical sur une mise en page de divs relatifs - jquery, css

J'ai une galerie que je construis et je ne peux pas faire voler verticalement les divs relatifs, Voir jsfiddle.
Je veux également ajouter l'assouplissement à mon code mais la méthode standard ne fonctionne pas, il semble arrêter le compte + = intervalle; de courir?

J'essaye de le faire voler comme ça.

 /*Fly in*/
$(document).ready(function () {
var count = 400;
var interval = 40
$(".gallery").each(function () {
$(this).delay(count).animate({
marginLeft: 0,
}, 500);
count += interval;
});
});
/*Fly in End*/

Réponses:

Je l'ai refait en utilisant des marges pour l'animer et ajouté un assouplissement en utilisant CSS3 parce que c'est plus fluide.
JS Fiddle Demo

    /*Fly in*/
$(document).ready(function () {
var count = 400;
var interval = 30
$(".gallery").each(function () {
$(this).delay(count).animate({
marginTop:0,
}, 500 );
count += interval;
});
});
/*Fly in End*/

CSS

.gallery {
width: 300px;
height: 169px;
margin-top: 800px;
overflow: hidden;
position: relative;
float: right;
-webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
-moz-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
-o-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
}