javascript - 鼠标悬停时弹出 Jquery 图像

Question

我想知道如何在 jQuery 中实现这种过渡效果 -

我有一个图像，当我用鼠标悬停在它上面时，图像会稍微过渡(尺寸放大)，当我将鼠标悬停在图像之外时，它会回落到原始大小。

这种行为就像我们在 Google Images 中看到的那样

Answer 1

我不确定 jQuery，但您可以使用 CSS3 转换。 CSS3 过渡并不适用于所有浏览器，但如果您想在 FF 和 Webkit 中获得乐趣...

假设您的图像包含在 <a> 中标签(编辑:示例 @ http://jsfiddle.net/Kai/x4Frn/ ):

a img {
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    transition: transform 0.3s ease;
}

a:hover img {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);

    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}