CSS3过渡的JQuery后备

我正在寻找一个简单的CSS3转换代码的JQuery / JS回退。 我的javascript非常基本，所以我找到并编写替换代码并不容易。 我已经检查过modernizr但我并不是很了解很多文档。

这是一个使用transform: rotate(20deg)的图标transform: rotate(20deg)当hover时transform: rotate(20deg) （这不是IE中支持的问题）。 但问题是转型，我正在使用

  .icon{ ....other css code -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } 

这有一个JQuery后备吗？ 我在考虑fadeIn(); 但我不知道我将如何编码。 像这样的东西？：

 $(icon).hover(function (){$(icon).fadeIn("slow");});  

我如何让浏览器知道它是一个后备，以便他们只选择JQuery，如果它是IE？

Answer 1

我认为你已经有了答案，你应该使用modernizr，它并不像你想象的那么复杂，现代化指定了两种方式，哪些是可用的function，哪些不是，第一种是通过一组CSS类中的HTML元素：

如果它可用，它将显示名称，如果它不可用，它将显示带有“no-”前缀的名称，如“no-flexbox”，第二个是通过javascript：

 if(!Modernizr.csstransitions) 

Modernizr有一组布尔变量可以告诉你它是否可用，所以如果你想为你的动画设置一个后备，我建议你使用Modernizr类来为只有具有这个function的浏览器指定动画：

 .csstransitions #element{ -webkit-transition: ... ; -moz-transition: ... ; -o-transition: ... ; -ms-transition: ... ; transition: ... ; } 

然后使用modernizr检查的变量创建一个javascript文件，如果该function可用，如果不可用，则指定动画：

 if(!Modernizr.csstransitions) $("#element").hover(function(){ $(this).animate({ ... your animation ... }, 5000); }); 

这可能会让你知道Modernizr是如何工作的（我希望），无论如何，如果你有问题，你可以查看我很久以前发过的这篇博文 ，就像CSS3PIE这样的东西说这样的东西（这不是垃圾邮件，我只是想帮忙）。

Answer 2

Transit将jQuery动画调用转换为CSS3动画，并针对不支持的浏览器回退到常规js。

或者，您可以扩展$ .support来检查这样的转换，并在对它们进行测试失败时使用jQuery动画。