jquery - 悬停时的图像动画jquery

Question

好的，

我希望当我悬停<li>包含图像的元素时，图像会变大（就像在谷歌图像缩略图中一样

<div>
    <ul class="images">
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
        <li><img src="http://www.placehold.it/150x100"/></li>
    </ul>
</div>

问题是，如果我只是为 li 设置动画，其他图片就会移动，设计就会被破坏。

如果需要，这是我的jsfiddle ...谢谢

Answer 1

您的li必须是相对定位的，并且其中包含一个绝对定位的元素。li悬停状态会使其他元素展开，但由于它们是“位置：绝对”，因此不会影响其他li定位。

喜欢（伪代码）：

li{width:150px; height:100px; position:relative}
li span{width:150px; height:100px; position:absolute; top:0; left:0; display:block}
li:hover span{width:200px; height:150px; top:-25px; left:-25px}

您还可以通过 javascript 更改 img 的src属性以在悬停时加载微小的缩略图和更大的详细图像。

如果您需要动画，只需添加jQuery Animate即可。

• 在纯 CSS上摆弄

Answer 2

你可以在这里找到各种插件。它们是不错的插件

Answer 3

我想你需要这样

看到这是根据您的要求的简单伪代码，不知道您到底需要什么。

jQuery 代码

$('.images img').on({
    mouseenter: function(){
        $(this).animate({width: '170px', height: '120px', top: '-=15px', left: '-=15px'}, 500);
    },
    mouseleave: function(){
        $(this).animate({width: '150px', height: '100px', top: '+=15px', left: '+=15px'}, 500);
    }
});

观看现场演示

Answer 4

$("li").hover(function() {
    $("img").css({'height':'200px', 'width':'300px'});
});

大概是这样的吧？

Answer 5

我终于找到了一种最简单的方法来为图像制作动画，无需 jQuery，仅使用 CSS3 过渡：

img
{
    width: 90%;
    height: 90%;
    -webkit-transition: max-width 0.5s, height 0.5s;
       -moz-transition: max-width 0.5s, height 0.5s;
          o-transition: max-width 0.5s, height 0.5s;
            transition: max-width 0.5s, height 0.5s;
}

img:hover
{
        width: 120%;
    height: 120%;
}