javascript - Keeping an image in its location when animation occurs -

i have grid of images , when click on image images 1 clicked move down. problem when image remaining pulled top left. think it's because i'm removing images remaining 1 not considered 1 it's placed in position 1 of grid

$(document).ready(function() {    $('#grid li').click(function() {   $(this).siblings().animate({opacity: 0, top:'15px'},1000);   $(this).siblings().fadeout(function() {      });   });     $('#hidden').click(function() {   $('#grid li img').animate({width:'339px',height:'211px'});   $('#grid li').siblings().fadein();   $('#grid li').siblings().animate({opacity: 1, top:'0px'},1000);        });    }); 

html

<div class="portfolio">   <ul id="grid">         <li><a href="#"><img src="1.jpg"><span>some text></a></li>      <li><a href="#"><img src="2.jpg"><span>some text></a></li>      <li><a href="#"><img src="3.jpg"><span>some text></a></li>      <li><a href="#"><img src="4.jpg"><span>some text></a></li>      <li><a href="#"><img src="5.jpg"><span>some text></a></li>      <li><a href="#"><img src="6.jpg"><span>some text></a></li>      <li><a href="#"><img src="7.jpg"><span>some text></a></li>      <li><a href="#"><img src="8.jpg"><span>some text></a></li>      <li><a href="#"><img src="9.jpg"><span>some text></a></li>       </ul></div>  <div id="hidden"> 

css

 ul#grid {   list-style: none;   top: 0;   margin: 60px auto 0;   width: 1200px;     }   #grid li span {   color: white;   display:block;   bottom:250px;   position:relative;   width:180px;   }   #grid li {   float: left;   margin: 0 40px 75px 0px;   display:inline;   position:relative;  } 

jsfiddle

the easiest way not use fadeout() cause sets display:none , why image gets moved.

$('#grid li').click(function() {   // $(this).siblings().css("position","relative");   $(this).siblings().animate({opacity: 0, top:'15px'},1000, function() {     // animation complete.       $('#grid li img').animate({width:'339px',height:'211px'});   });  });   

fiddle