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

这页纸：

www.tranceil.fm

4

3 回答 3

3

我知道您需要一个 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;
}
于 2012-11-27T15:06:54.143 回答
1

加载文档后，只需设置 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");
        }
    );
});
于 2012-11-27T15:07:57.760 回答
1

怎么样

<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 对浏览器更安全一些。

于 2012-11-27T15:08:47.370 回答