Question

我使用Css3 border-radius生成了图像的圆形缩略图。我想鼠标移动动画，其中鼠标悬停时圆形缩略图尺寸增大，鼠标移出时返回原始尺寸。尺寸从圆心增加，左右缩略图重叠。

的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);
});

请记住为那些imgs添加'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，那么除了宽度/高度之外，您还需要使用元素的位置。

Animate圆形缩略图大小在鼠标悬停时使用jquery增长

2 个答案: