jQuery: playing with the siblings() method
HTML
<div id="gallery">
<img src="https://lh4.googleusercontent.com/-l8Ji4wDA2c4/T1Mra5NRiTI/AAAAAAAAA3o/PHbTLTwSMjA/s425/code-programming.jpg" alt="" />
<img src="https://lh3.googleusercontent.com/-ISQjG6q7XwQ/T1MrgdZa1ZI/AAAAAAAAA3o/iaNG5xtS0mo/s428/help-frustration.jpg" alt="" />
<img src="https://lh4.googleusercontent.com/-kRgsZo7nuB0/T1MrbGVcPdI/AAAAAAAAA3o/dwthcyWMr0s/s425/doubt-confusion.jpg" alt="" />
<img src="https://lh6.googleusercontent.com/-e9hDeXXY844/T1MrjEUCt2I/AAAAAAAAA3o/u-j3mrmg3uw/s400/nerd.jpg" alt="" />
<img src="https://lh3.googleusercontent.com/-21QdhhB_4rI/T1MrnK2rX1I/AAAAAAAAA3o/-AAnRW9UjiM/s425/seo.jpg" alt="" />
<img src="https://lh3.googleusercontent.com/-dBlww3_uc0c/T1tEOigFdMI/AAAAAAAAA8A/8UgXM2_XCEk/s500/writer.jpg" alt="" />
</div>
CSS
#gallery {
width: 600px;
margin: 2em auto;
overflow: hidden;
}
#gallery img {
float: left;
width: 195px;
margin-right: 5px;
margin-bottom: 5px;
height: 150px;
cursor: pointer;
position: relative;
}
JavaScript
$('img').click(function() {
$(this).siblings('img').fadeTo(500, .3).animate({
left: - 5
}, 200).animate({
left: 0
}, 250).fadeTo(250, 1);
});