悬停时的淡入/淡出效果答案

【问题标题】：FadeIn/out effect on hover悬停时的淡入/淡出效果
【发布时间】：2012-11-27 23:16:52
【问题描述】：

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

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

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

<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

【问题讨论】：

标签： javascript jquery layout

【解决方案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;
}

【讨论】：

+1 和我写的一样，不需要的时候不需要额外的js。
@user1394965 是的，我还添加了过渡以获得平滑效果
那不是动画...你至少需要添加transition...而且它在IE8之类的浏览器中也不起作用...
这不是淡入/淡出。它只是改变不透明度而不进行插值
嗯，这就是我在搜索效果时遇到的解决方案..但你的似乎更简单:) 谢谢，下次记住它！

【解决方案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");
        }
    );
});

【讨论】：

【解决方案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 对浏览器更安全。

【讨论】：