为按钮创建平滑过渡，以便在悬停时显示隐藏的跨度

Question

我有一个按钮，当它悬停在上面时，显示一个隐藏的<span>。我想弄清楚的是如何在:hover上转换按钮的扩展，以便更顺畅。我尝试过使用CSS3过渡但无法完全理解它。另外，我不知道这是否是最好的解决方案。

编辑：我添加了一些jQuery，但肯定有问题。这是我在阅读之前的答案之后使用的脚本（如果我能再次找到它，我会参考）：

$('a:has(span)').hover(
    function() { $('span', this).fadeIn(); },
    function() { $('span', this).fadeOut(); },
);

我创造了一个小提琴：http://jsfiddle.net/UYexr/。任何人都可以帮助我吗？

Answer 1

如果我是你，我会因为缺乏支持而避免使用CSS3;鉴于我可能会坚持使用JS动画。

我认为这样做的最佳方法是使跨度为display:inline-block;并定义宽度。然后，您可以使用javascript动画库为span的显示设置动画。

就个人而言，我会继续使用jQuery的animate method。虽然有很多很多的js动画库...