【问题标题】: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 对浏览器更安全。

      【讨论】:

        猜你喜欢
        • 2015-09-02
        • 2011-08-25
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多