淡入淡出对链接悬停的影响?

  • 回答 (2)
  • 关注 (0)
  • 查看 (13)

在许多网站上,例如http://www.clearleft.com,您会注意到,当链接悬停时,它们会褪色成不同的颜色,而不是立即切换默认操作。

我认为JavaScript被用来创造这种效果,有谁知道如何?

毛莹毛莹提问于
HXD3C0134风险控制;公司往云上走回答于
已采纳

现在人们只是使用CSS3转换,因为它比JS搞乱要容易得多,浏览器支持相当好,而且仅仅是表面化的,所以不管它是否工作都没关系。

像这样的东西可以完成这项工作:

a {
  color:blue;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}
a:hover { color:red; }

您还可以通过用逗号分隔每个声明来使用不同的定时和缓动函数来过渡特定的CSS属性,如下所示:

a {
  color:blue; background:white;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }

在这里演示

水中的鱼回答于

您可以使用JQueryUI完成此操作:

$('a').mouseenter(function(){
  $(this).animate({
    color: '#ff0000'
  }, 1000);
}).mouseout(function(){
  $(this).animate({
    color: '#000000'
  }, 1000);
});

http://jsfiddle.net/dWCbk/

扫码关注云+社区