悬停时的图像动画jquery答案

【问题标题】：image animation jquery on hover悬停时的图像动画jquery
【发布时间】：2013-05-19 02:53:16
【问题描述】：

好的，

我希望当我将鼠标悬停在包含图像的 <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...谢谢

【问题讨论】：

为什么有人会否决我的问题？
不知道，刚刚投了赞成票。这是一个不错的问题
+1 这是个好问题

标签： jquery image hover jquery-animate

【解决方案1】：

你的 li 必须是相对定位的，并且在其中包含一个绝对定位的元素。 li 悬停状态会使其他元素展开，但由于它们是 'position:absolute'，因此不会影响其他 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 即可。

Fiddle on pure css

【讨论】：

虽然我使用 jquery 做了同样的事情（没有纯 css :) 但我仍然有问题，照片的动画效果正确，但即使使用 z-index:999999999999 仍然有图像悬停图像的右侧可见..
它做了类似的事情：link
其他浏览器也会这样吗？

【解决方案2】：

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

【讨论】：

... 好的，但如果我想自己做呢？
所有的 css 都在那里可用。你可以使用它

【解决方案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);
    }
});

See Live DEMO

【讨论】：

谢谢 Dhaval Marthak，但这不是我想要的。我希望图像变大，而其他图像根本不动！

【解决方案4】：

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

大概是这样的吧？

【讨论】：

【解决方案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%;
}

【讨论】：