Мне нужен переход CSS3 для работы в IE9

Ответ 1

Как вы правильно определили, 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 и выше.

Надеюсь, это поможет!

Ответ 2

Вы можете попробовать обратный подход с помощью 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;