I am experiencing an issue with a grid of images where, upon clicking one image, all the other images move down. However, the remaining image is pulled to the top left corner. I suspect this is happening because by removing the other images, the remaining image is not recognized as the only one left and is placed in the first position of the grid.
$(document).ready(function() {
$('#grid li').click(function() {
$(this).siblings().animate({opacity: 0, top:'15px'},1000);
$(this).siblings().fadeOut();
});
$('#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</span></a></li>
<li><a href="#"><img src="2.jpg"><span>some text</span></a></li>
<li><a href="#"><img src="3.jpg"><span>some text</span></a></li>
<li><a href="#"><img src="4.jpg"><span>some text</span></a></li>
<li><a href="#"><img src="5.jpg"><span>some text</span></a></li>
<li><a href="#"><img src="6.jpg"><span>some text</span></a></li>
<li><a href="#"><img src="7.jpg"><span>some text</span></a></li>
<li><a href="#"><img src="8.jpg"><span>some text</span></a></li>
<li><a href="#"><img src="9.jpg"><span>some text</span></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;
}