【问题标题】:How would I fade an icon to a lower opacity using jQuery?如何使用 jQuery 将图标淡化为较低的不透明度?
【发布时间】:2011-03-21 12:32:45
【问题描述】:

我有这组图标,

<div class="nav">
<a href="/ask" title=""><img id="icon"
src="http://static.tumblr.com/ctwb3zj/4KZlie2ck/08-chat.png"></a>
<a href="/random" title="Random"><img class="icon1" id="icon"    
src="http://static.tumblr.com/ctwb3zj/oOFlie27f/05-shuffle.png"></a>
<a href="/archive" title="Archive"><img id="icon"
src="http://static.tumblr.com/ctwb3zj/G1Glie23v/11-clock.png"></a>
</div> 

当悬停时,我希望它们褪色到较低的不透明度。我不想使用 Javascript 调用图像......这很容易吗?

【问题讨论】:

    标签: jquery html animation css


    【解决方案1】:

    您需要修复该 HTML 以使用 class 属性。不能有多个元素具有相同的id 属性。

    <div class="nav">
    <a href="/ask" title=""><img class="icon"
    src="http://static.tumblr.com/ctwb3zj/4KZlie2ck/08-chat.png"></a>
    <a href="/random" title="Random"><img id="icon1" class="icon"    
    src="http://static.tumblr.com/ctwb3zj/oOFlie27f/05-shuffle.png"></a>
    <a href="/archive" title="Archive"><img class="icon"
    src="http://static.tumblr.com/ctwb3zj/G1Glie23v/11-clock.png"></a>
    </div>
    

    然后,使用这个 jQuery:

    $('img.icon').hover(
        function() {
            console.log('hello');
            $(this).stop().animate({ opacity: 0.5 });
        },
    
        function() {
            $(this).stop().animate({ opacity: 1.0 });
        }
    );
    

    这将使图标在鼠标进入时设置为 50% 的不透明度,并在鼠标离开时恢复为 100%。

    jsFiddle

    【讨论】:

    • .stop 应该添加到两个动画语句中,以停止多次触发动画效果。 $(this).stop().animate({opacity: .5});
    【解决方案2】:

    试试这个:

    $(function(){
        $('.icon').hover(function(){
            $(this).stop().fadeTo("slow", 0.4);
        }, function(){
            $(this).stop().fadeTo("slow", 1);
        });
    });
    

    【讨论】:

      【解决方案3】:

      首先,你不能有多个元素具有相同的id,所以id="icon"应该变成class="icon",然后你可以使用jQuery添加这些悬停函数:

      $('.icon').hover(function() {
          $(this).fadeTo(500, .3);
      }, function() {
          $(this).fadeTo(300, 1);
      });
      

      fadeTo() 中的第一个数字是持续时间,第二个是不透明度,分别是悬停和取消悬停。

      【讨论】:

      • 感谢您的回答,但它不起作用 :( 你能在roseanneconner.tumblr.com 上查看一下吗。老实说,我不知道为什么它的所有内容都不正确。我确定将每个 id 更改为 class。
      • 不,他们都有id="photoSmall"。您可以尝试在 $() 选择器中使用该 id 或将它们更改为类。
      【解决方案4】:

      根据您的浏览器支持需求,您可以使用 CSS3 opacity 和 :hover 选择器。不需要 jQuery,在现代浏览器(Gecko、Webkit、Opera...也许是 IE9,但我无法测试)中运行良好。

      像这样添加 CSS:

      img:hover{opacity:0.50;}
      

      【讨论】:

        猜你喜欢
        • 2015-08-12
        • 2012-09-21
        • 2021-11-15
        • 1970-01-01
        • 2013-10-14
        • 1970-01-01
        • 2011-03-27
        • 2017-04-18
        • 1970-01-01
        相关资源
        最近更新 更多