Question

我为具有css转换的客户端创建了一张贺卡，但我不知道它与IE9不兼容。

贺卡是http://voeux.geekarts.fr/v4.html

有没有办法让这个在IE9中运行？放一个jQuery或任何黑客 - 有些东西让它在IE9中工作。

谢谢

Answer 1

正如您已正确识别的那样，Internet Explorer 9是最后一个不支持transition property或animations的IE浏览器。话虽这么说，它也是最后一个支持conditional comments的IE浏览器，所以你可以想象将后备代码放入一个只有IE9的条件评论中，并将其作为你的解决方案提供给所有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并设置目标状态以及动画持续时间。

需要注意的一件重要事情是，您需要加载a version of jQuery that supports your target IE versions。 jQuery 2.x仅支持Internet Explorer 9及更高版本，但jQuery 1.x支持Internet Explorer 6及更高版本。

希望这有帮助！

Answer 2

您可以尝试使用JQuery Transit的反向方法 http://ricostacruz.com/jquery.transit/

它会将JQuery样式转换映射到CSS3转换并使用适当的代码（如下），如果CSS3转换不可用，那么它可以优雅地回退到标准JQuery。

JQuery Transit使用简单的Javascript方法transition（）来执行每个操作。语法与JQuery animate（）非常相似。

$('.box').transition({ opacity: 0 });

如果你将transition（）映射到JQuery animate（），它将在标准JQuery（如果可用）中执行相同的操作。如果CSS3过渡不可用，则以下代码（取自示例页面）将使用animate（）：

// Delegate .transition() calls to .animate()
// if the browser can't do CSS transitions.

if (!$.support.transition)
  $.fn.transition = $.fn.animate;

我需要CSS3过渡才能在IE9中运行

2 个答案: