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

Jquery image hover how to create a nice hover fade effect with shadow and down movement?

本文关键字：悬停 淡出 移动 阴影 一个 何创建 图像 创建 Jquery 漂亮      更新时间：2023-09-26

如何创建一个漂亮的悬停效果，当鼠标在图像上。它应该逐渐淡入，有一些阴影，并向下移动一点。

.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标准属性。

相关文章：