javascript - 悬停淡入/淡出效果

Question

我的页面上有几个社交 Logo 的淡入/淡出效果。

看起来它们工作正常，但在我将鼠标悬停在它们上方之前，最初的淡入不会起作用。

如何在页面加载时使淡入功能起作用？

<script type='text/javascript'>
    $(document).ready(function()
    {
        $("img.a").hover(function() 
        {
            $(this).stop().animate({"opacity": "1"}, "fast");
        },
        function() 
        {
            $(this).stop().animate({"opacity": "0.5"}, "fast");
        });
    });
</script>

页面:

www.tranceil.fm

Answer 1

我知道您需要一个 jQuery 解决方案，但如果可以用 CSS 实现，为什么还要使用它呢？

img.class {
   opacity: .5;
   transition: opacity 2s;
   /* Transitions will take care of the smooth effect */
   -moz-transition: opacity 2s; /* Firefox 4 */
   -webkit-transition: opacity 2s; /* Safari and Chrome */
   -o-transition: opacity 2s; /* Opera */
}

img.class:hover {
   opacity: 1;
}

注意:我没有使用 rgba 因为它只是一个图像

对于 IE 支持，您可以使用 CSS3 Pie

如果你仍然想坚持使用 jQuery，我觉得它不太好，但我想你可以通过简单地在 CSS 中定义它来为你的社交图标设置初始不透明度

img.a {
   opacity: .5;
}