Создание плавного перехода для кнопки, которая показывает скрытый диапазон при наведении

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 для анимации отображения диапазона.

Лично я хотел бы использовать jQuery animate method . Хотя есть множество библиотек анимации js ...