6

我正在寻找一个简单的 CSS3 转换代码的 JQuery/JS 后备。我的 javascript 非常基础，因此我很难找到并编写替换代码。我已经检查了modernizr，但我并没有真正理解很多文档。

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();但我不知道我将如何编码。像这样的东西？：

<script>$(icon).hover(function (){$(icon).fadeIn("slow");}); </script>

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

4

2 回答 2

15

我想你已经有了答案，你应该使用modernizr，它并不像你想象的那么复杂，modernizr 有两种方法可以指定哪些功能可用，哪些不可用，第一种是通过一组 CSS 类HTML 元素：

<html class="js no-flexbox canvas canvastext postmessage no-websqldatabase ... ">

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

if(!Modernizr.csstransitions)

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

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

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

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

这可能会让您了解 Modernizr 的工作原理（我希望如此），无论如何，如果您有问题，您可以查看我很久以前发表的这篇博文，上面写着类似 CSS3PIE 之类的其他内容（这不是垃圾邮件，我只是想帮忙）。

于 2013-03-28T13:46:57.950 回答
7

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

或者，您可以扩展 $.support 以检查这样的转换，并在测试失败时使用 jQuery animate。

于 2013-03-28T13:33:49.023 回答