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

Question

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

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

Как это сделать с тем же эффектом 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 заключается в том, что они будут игнорироваться, если браузер их не распознает. В этом случае переход просто перейдет к мгновенному перевороту.

Я бы рекомендовал использовать sprite image. Затем вместо изменения изображения при наведении ... просто измените положение изображения.

.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; 
}