使用 jquery 鼠标悬停时动画圆形缩略图大小增加答案

【问题标题】：Animate Circular thumbnail size grow on mouse over using jquery使用 jquery 鼠标悬停时动画圆形缩略图大小增加
【发布时间】：2015-01-04 20:36:49
【问题描述】：

我使用 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，它给了我维度增长的动画，但 circle 不会保留在初始 center 上。宽度向右增加，高度向下增加。

$("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，其中圆圈长大保持中心不变，并在动画期间重叠缩略图。

【问题讨论】：

标签： javascript jquery css jquery-animate

【解决方案1】：

最简单的方法是使用 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，那么除了元素的宽度/高度之外，你还需要使用元素的位置。

【讨论】：

是的，我还需要调整位置以获得适当的平滑动画

【解决方案2】：

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

记得为这些图片添加“位置：相对”！

【讨论】：

如果 css 设置为使用 css3 媒体查询的响应式设计，有什么方法可以抓取这个动画。
我不明白这个问题:(
此处所有尺寸值仅针对特定分辨率进行设置，可能针对响应式设计中的手机屏幕圆形尺寸变化。所以我们需要使用变量为宽度、left.left、top 设置动画，以在任何屏幕分辨率下获得相同的效果。
好吧，如果你想让它由 jQuery 制作，你只需要计算新的值。