В даний час люди просто використовують переходи CSS3, тому що це набагато простіше, ніж возитися з JS , підтримка браузера є досить хорошою і просто косметичною, тому не має значення, якщо це не працює.
Щось подібне робить роботу:
a {
color:blue;
/* First we need to help some browsers along for this to work.
Just because a vendor prefix is there, doesn't mean it will
work in a browser made by that vendor either, it's just for
future-proofing purposes I guess. */
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.5s;
}
a:hover { color:red; }
Ви також можете переходити певні властивості CSS з різними функціями синхронізації та полегшення, розділяючи кожну декларацію комою, наприклад:
a {
color:blue; background:white;
-o-transition:color .2s ease-out, background 1s ease-in;
-ms-transition:color .2s ease-out, background 1s ease-in;
-moz-transition:color .2s ease-out, background 1s ease-in;
-webkit-transition:color .2s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }
Демо тут