html 


<div class='for_block_rot'>
<div class="for_block_rot_img"><img src='../reversing1_1.jpg' HEIGHT="70" WIDTH="300" /><img src='../reversing2_1.jpg' HEIGHT="0" WIDTH="300"/></div>
<div class="for_block_rot_img"><img src='../reversing1_2.jpg' HEIGHT="70" WIDTH="300" /><img src='../reversing2_2.jpg' HEIGHT="0" WIDTH="300"/></div>
<div class="for_block_rot_img"><img src='../reversing1_3.jpg' HEIGHT="70"  WIDTH="300" /><img src='../reversing2_3.jpg' HEIGHT="0" WIDTH="300"/></div>
<div class="for_block_rot_img"><img src='../reversing1_4.jpg' HEIGHT="70" WIDTH="300" /><img src='../reversing2_4.jpg' HEIGHT="0" WIDTH="300"/></div>
</div>

css 


.for_block_rot{
width:300px; 
height:280px; 
margin-left:150px;
overflow:hidden;
border: 1px solid black;
margin-top:8px;
background-color: black; 
}

.for_block_rot_img{
width:300px; 
height:70px;
}

js


$(document).ready(function(){
i=0; //отсрочка анимации

$('.for_block_rot').toggle(function(){
i=0;
if ($('.for_block_rot_img img').last().height()==0) { 
$('.for_block_rot_img').each (function (){
$(this).children('img').first().delay(i).animate({height:'0px'}, 500);
$(this).children('img').last().delay(i).animate({height:'70px'}, 500);
i+=200;
});
}
}, function() { 
i=0;
if ($('.for_block_rot_img img').first().height()==0) { 
$('.for_block_rot_img').each (function (){
$(this).children('img').first().delay(i).animate({height:'70px'},500);
$(this).children('img').last().delay(i).animate({height:'0px'},500);
i+=200;
}); 
}
});



}); //конец реади