鼠标悬停时的淡入/淡出效果

Question

我的网页上有几个社交标志，使用了淡入/淡出效果。

看起来它们运作正常，但最初的淡入效果只有当我将鼠标悬停在它们上面时才有效。

我该如何让淡入效果在页面加载时就能生效？

<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>

The Page:

www.tranceil.fm

- TonalDev

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;
}

- Mr. Alien

---

+1 我正在写同样的东西，当不需要时就不需要使用额外的 js。 - dsgriffin

@user1394965，我也添加了过渡效果以实现平滑的效果。 - Mr. Alien

这不是动画效果...你至少需要添加transition...而且在像IE8这样的浏览器中也无法正常工作... - Robert Koritnik

这不是一个淡入淡出。它只是改变不透明度，没有插值。 - Alessandro Pezzato

这就是我在搜索效果时找到的解决方案...但你的方法似乎更简单 :) 谢谢，我会记住它以备下次使用！ - TonalDev

Answer 2

文档加载后，简单设置已经存在的CSS。

$(document).ready(function(){
    $("img.a").css({"opacity": "0.5"});
    $("img.a").hover(
        function() {
            $(this).stop().animate({"opacity": "1"}, "fast");
        },
        function() {
            $(this).stop().animate({"opacity": "0.5"}, "fast");
        }
    );
});

- MarcoK

Answer 3

怎么样？

<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");
        }
    ).css('opacity':'0.5');

});
</script>

你也可以用CSS实现，但jQuery更加兼容各种浏览器。

- alexg