为按钮创建平滑过渡，在悬停时显示隐藏的跨度 [英] Creating smooth transition for a button that reveals hidden span when hovered

问题描述

我有一个按钮，当悬停时，显示一个< span> ，否则隐藏。我想弄清楚的是如何转换按钮的扩展：hover ，所以它更加平滑。我尝试使用CSS3过渡，但不能完全弄清楚。加上我不知道这是否最好的解决方案。

I have a button that, when hovered over, shows a <span> that is otherwise hidden. What I'm trying to figure out is how to transition the button's expansion on :hover so it's more smooth. I tried using CSS3 transitions but couldn't quite get it down. Plus I don't know if that's the best solution anyway.

编辑：我添加了一些jQuery，但必须有错误。这里是我使用的脚本，在这里读取以前的答案（如果我可以找到它，我会引用）：

I added some jQuery but must have something wrong. Here's the script I used, after reading a previous answer here (which I'll reference if I can find it again):

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

我创建了一个小提琴： http://jsfiddle.net/UYexr/ 。

I've created a Fiddle: http://jsfiddle.net/UYexr/. Can anyone help me out?

推荐答案

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

If I were you I would avoid using CSS3 simply because of its lack of support; given that I would probably stick to JS animation.

我会看到这样做的最好的方法是使跨度有 display：inline-块; 具有定义的宽度。然后，您可以使用javascript动画库为span的显示设置动画。

The best way I would see to do this is to make the span have display:inline-block; with a defined width. Then you can use a javascript animation library to animate the span's display.

就我个人而言，我会使用jQuery的动画方法。虽然有充足的js动画库...

Personally, I would go about using jQuery's animate method. Although there are plenty of js animation libraries...

这篇关于为按钮创建平滑过渡，在悬停时显示隐藏的跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！