Простое меню jQuery / CSS3 с переходами

Question

Я пытаюсь создать простое меню с хорошим эффектом перехода, используя jQuery или CSS3.Проблема в том, что мне нужны 3 кнопки с 3 разными состояниями наведения и активностью (т. Е. Разными цветами).Что лучше?jQuery или CSS3?Я знаю, что IE9 не поддерживает CSS3, поэтому стоит ли использовать это прямо сейчас?Я думаю, что это меню легче реализовать с помощью CSS3, чем jQuery.Смотрите мое меню здесь , которое было создано с помощью учебника jQuery, который я нашел здесь .

Как видите, вторая кнопка (красная) не отображается плавно, в то время как третья кнопка имеет более плавный переход.Мне нужен этот эффект для всех трех, но у каждой кнопки будет свой цвет.

Это то, как вы бы сделали тот же эффект с CSS3?

.button1 {
    background-image: url('test.png');
 }

.button1:hover {
    background-image: url('test_hover.png');
    transition: background-image .15s ease-in;
    -webkit-transition: background-image .15s ease-in;

Надеюсь, я все правильно объяснил.Если вам нужны какие-либо разъяснения, дайте мне знать.Спасибо.

Answer 1

Преимущество использования переходов CSS3 заключается в том, что они будут игнорироваться, если браузер их не распознает.В этом случае переход будет просто возвращаться к мгновенному щелчку.

Я бы порекомендовал использовать спрайт-изображение .Тогда вместо изменения изображения при наведении ... просто измените положение изображения.

.button1 {
    background-image: url('test_sprite.png');
    background-position: top;
}

.button1:hover {
    background-position: bottom;
    transition: background-position .15s ease-in;
    -moz-transition: background-position .15s ease-in;
    -o-transition: background-position .15s ease-in;
    -webkit-transition: background-position .15s ease-in;
    -ms-transition: background-position .15s ease-in;
}