Jquery图像悬停如何用阴影和向下运动创建一个漂亮的悬停淡入淡出效果？

Question

当鼠标悬停在图像上时，如何创建漂亮的悬停效果呢？它应该淡入并获得一些阴影然后向下移动。

Answer 1

CSS：

.hoverImg {
    opacity: 0.5;
    margin-top: 0px;
    box-shadow: 0px 0px 0px #000;
}

JavaScript：

$('.hoverImg').each(function()
{
    $(this).mouseover(function()
    {
        $(this).animate({'opacity': 1, 'margin-top': '5px', 'box-shadow': '2px 2px 2px #000'}, {duration: 500});
    });
    $(this).mouseout(function()
    {
        $(this).animate({'opacity': 0.5, 'margin-top': '0px', 'box-shadow': '0px 0px 0px #000'}, {duration: 500});
    });
});

警告：box-shadow可能无法单独使用jQuery制作动画。查看jQuery UI以获取可能的解决方案。此外，您（当然）想要为box-shadow添加特定于浏览器的前缀，因为它尚未作为CSS标准属性得到普遍支持。