<table id="doors" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div class="door">
<a class="link-foto" href="#"><img class="foto" width="31" height="87" src="css/door1.jpg" alt="" /></a>
</div>
</td>
<td valign="top">
<div class="door">
<a class="link-foto" href="#"><img class="foto" width="31" height="87" src="css/door2.jpg" alt="" /></a>
</div>
</td>
<td valign="top">
<div class="door">
<a class="link-foto" href="#"><img class="foto" width="31" height="87" src="css/door3.jpg" alt="" /></a>
</div>
</td>
</tr>
</table>
$('#doors .link-foto').hover(
function() {
$(this).parent('.door').addClass('active');
$('.foto',this).animate({
height: 134,
width: 48,
'margin-top': 0
},150);
},
function() {
// $(this).parent('.door').removeClass('active');
// $('.foto',this).stop();
$('.foto',this).animate({
height: 87,
width: 31,
'margin-top': 23
},150,'linear',function(){ $(this).parent().parent().removeClass('active'); });
}
);
Анимация работает везде хорошо, кроме IE 8, даже IE 6 все нормально.
Глюк заключается в том что если быстро провести мышкой по картинкам то они все делают анимацию увеличения и уменьшения не зависимо друг от друга, начинает первая, затем остальные. Получается такая волна анимации.
А в IE 8 происходит небольшая задержка перед стартом анимации и анимируются картинки одновременно. И волны не получается, выглядит не красиво.