Creating smooth transition for a button that reveals hidden span when hovered

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. P开发者_JS百科lus I don't know if that's the best solution anyway.

EDIT: 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(); },
);

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

---

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.

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.

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