Question

我的页面上有一些FadeIn / Out效果，有几个社交徽标。

似乎它们工作正常，但最初的淡入效果不会起作用，直到我将它们悬停在它们上面。

如何在加载页面时使淡入功能正常工作？

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

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

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更安全。

悬停时淡入/淡出效果

3 个答案: