это мой код jQuery
$("ul .thumb li").hover(function () {
debugger;
$(this).css({ 'z-index': '10' });
$(this).find('img').addClass("hover").stop().animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 500);
}, function () {
$(this).css({ 'z-index': '0' });
$(this).find('img').removeClass("hover").stop().animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 500);
});
Это мой CSS
ul.thumb
{
float: left;
list-style: none;
margin: 0;
padding: 10px;
width: 360px;
}
ul.thumb li
{
margin: 0;
padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img
{
width: 100px;
height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0;
top: 0;
}
ul.thumb li img.hover
{
background: url(homePageImage.png) no-repeat center center;
}
это моя разметка
<ul class="thumb">
<li><a href="#">
<img src="images/att.jpg" alt="" /></a></li>
<li><a href="#">
<img src="images/images%20(10).jpg" alt="" /></a></li>
<li><a href="#">
<img src="images/nintendo.jpg" alt="" /></a></li>
<li><a href="#">
<img src="images/images%20(11).jpg" alt="" /></a></li>
<li><a href="#">
<img src="images/images%20(13).jpg" alt="" /></a></li>
<li><a href="#">
<img src="images/images%20(14).jpg" alt="" /></a></li>
<li><a href="#">
<img src="images/images%20(3).jpg" alt="" /></a></li>
<li><a href="#">
<img src="images/images%20(4).jpg" alt="" /></a></li>
<li><a href="#">
<img src="images/images%20(3).jpg" alt="" /></a></li>
</ul>
Изображения должны быть увеличены на MouseOver, но ничего не происходит!помощь оценена.