Я создаю поздравительную открытку для клиента с переходом css, но я не знал, что он несовместим с IE9.
Поздравительная открытка - http://voeux.geekarts.fr/v4.html
Есть ли способ заставить это работать в IE9? помещая jQuery или любой хак - кое-что, чтобы заставить его работать в IE9.
Спасибо
Как вы правильно определили, Internet Explorer 9 был последним из браузеров IE, чтобы не поддерживать свойство transition или анимации. При этом последний из IE-браузеров поддерживал условные комментарии, поэтому вы могли бы поместить резервный код в IE9-only условный комментарий и доставить это как решение для всех пользователей IE9 (и ниже).
<!--[if lte IE 9]>
<script src="animation-legacy-support.js"></script>
<![endif]-->
Это, конечно же, будет доставлено только в браузере Internet Explorer 9 или ниже. Теперь все, что вам осталось сделать, это настроить анимацию jQuery. Например, мы могли бы запустить изображение через серию таких переходов:
(function () {
"use strict";
$("img.kitten")
.animate({ width: 300 }, 1000) // Animate to 300px wide
.animate({ width: 50 }, 2000) // Then, to 50px wide
.animate({ opacity: .25 }, 1000); // Then, make it semi-transparent
}());
Каждый раз, когда вам нужно настроить другой ключевой кадр, просто добавьте еще один вызов $.fn.animate и настройте целевое состояние, а также анимацию длительность.
Важно отметить, что вам нужно загрузить версию jQuery, которая поддерживает ваши целевые версии IE. jQuery 2.x поддерживает только Internet Explorer 9 и выше, однако jQuery 1.x поддерживает версии Internet Explorer версии 6 и выше.
Надеюсь, это поможет!
Вы можете попробовать обратный подход с помощью JQuery Transit http://ricostacruz.com/jquery.transit/
Он отобразит переходы стиля JQuery на переходы CSS3 и соответствующий код (ниже), если переходы CSS3 недоступны, тогда он может изящно вернуться к стандартному JQuery.
JQuery Transit использует простой метод Javascript, переход() для выполнения каждой операции. Синтаксис очень похож на JQuery animate().
$('.box').transition({ opacity: 0 });
Если вы переместите "map" transition() в JQuery animate(), он будет выполнять ту же операцию в стандартном JQuery (если доступно). Следующий код (взятый на странице примера) будет использовать animate(), если переходы CSS3 недоступны:
// Delegate .transition() calls to .animate()
// if the browser can't do CSS transitions.
if (!$.support.transition)
$.fn.transition = $.fn.animate;