使用jquery将鼠标悬停在动画圆形缩略图上时会变大

Question

我已经使用Css3边界半径生成了图像的圆形缩略图。 我想要鼠标悬停动画，其中鼠标悬停时圆圈缩略图的尺寸会增大，鼠标移出时会恢复到原始尺寸，并且尺寸从圆圈的中心开始增加，并且该圆圈的左右缩略图重叠。

CSS：

 #baar{position:fixed;width:100%;height:110px;background:black;top:130px;}

    ul#block{ display:inline-block; list-style:none; position:relative;left:0px;}

    ul#block li{float:left; list-style:none;width:110px; height:110px;overflow:visible; position:relative; text-align:center;padding-left:5px}

    ul#block li img {background:grey;width:100px; height:100px;border :5px solid red;border-radius:55px 55px 55px 55px;}

HTML：

<body>
<div id="baar">
    <ul id="block">
        <li><img></li>   
         <li><img></li> 
         <li><img></li> 
         <li><img></li> 
    </ul>    
</div>
</body>

这是我拥有的jQuery，它使我的尺寸动画有所增长，但圆并没有停留在初始中心。 宽度向右增加，高度向底部增加。

$("ul#block li img").mouseover(function() {
$(this).animate({'width':130, 'height':130}, {duration:100});
                    }).mouseout(function(){

$(this).animate({'width':110, 'height':110}, {duration:100});
                    });

jsfiddle： http : //jsfiddle.net/k9nQU/15/

因此，请帮助我为动画编写适当的jquery，其中圆圈长大并保持中心不变，并在动画期间重叠缩略图。

Answer 1

CSS3：

ul#block li img {
    background:grey;
    width:100px; 
    height:100px;
    border :5px solid red;
    border-radius: 55px;
    position: relative;
    left: 0;
    top: 0;
    -webkit-transition: all .1s ease;
}
ul#block li img:hover {
    width:120px; 
    height:120px;
    left: -10px;
    top: -10px;
    border-radius: 65px;
    -webkit-transition: all .1s ease;
}

jQuery的：

$('ul#block li img').on('mouseover', function() {
    $(this).animate({
        width: '120px',
        height: '120px',
        left: '-10px',
        top: '-10px',
        borderRadius: '65px'
    }, 100);
});
$('ul#block li img').on('mouseout', function() {
    $(this).animate({
        width: '100px',
        height: '100px',
        left: '0px',
        top: '0px',
        borderRadius: '55px'
    }, 100);
});

并记住为这些img添加“ position：relative”！

Answer 2

最简单的方法是使用CSS3的转换+转换。

div {
    background: hotpink;
    width: 50px;
    height: 50px;
    -webkit-transition: -webkit-transform 250ms;
    transition: transform 250ms;
}
div:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

如果确实需要使用jQuery，则除了宽度/高度之外，还需要使用元素的位置。

使用jquery将鼠标悬停在动画圆形缩略图上时会变大

问题描述

2 个解决方案

解决方案1
2 2013-02-07 09:09:37

解决方案2
2 2013-02-07 09:32:56

使用jquery将鼠标悬停在动画圆形缩略图上时会变大

问题描述

2 个解决方案

解决方案1 2 2013-02-07 09:09:37

解决方案2 2 2013-02-07 09:32:56

解决方案1
2 2013-02-07 09:09:37

解决方案2
2 2013-02-07 09:32:56