jquery - 如何在我现有的代码/css 中使用淡入淡出 EASING？可能吗？

Question

我以前从未做过缓动，我正在尝试用我现有的代码找出它是否可能。我已经有了 css a:hover。如何在现有代码中使用淡入淡出缓动？

#rbox a {height:48px;
         line-height:48px;
         padding-left:17px;
         padding-right:17px;
         float:left;
         color:#FFF;
         background:#c04747;
         font-size:17px
        }

#rbox a:hover {background:#6C6C6C;}



<div id="rbox"> <a href="mtf.com">Meet the Founder</a></div>

Answer 1

关于 CSS3 缓动，您可能需要注意的一件事是旧浏览器可能不支持它。在这种情况下，您可以尝试使用 jQuery。

同时，这是一个生成 CSS3 缓动规则的好工具。

http://matthewlein.com/ceaser/

如果我理解正确，您的代码可能如下所示：

#rbox a:hover
{
    background:#6C6C6C;
    -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -ms-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}

Answer 2

如果您的意思是 css3 转换，这应该这样做：

#rbox a {
  ...
  transition: all .5s ease-in-out;
}

如果您想要支持所有浏览器，请确保添加供应商前缀。