fum*_*mpr 6 jquery fallback transition css3
我正在寻找一个简单的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？
MAR*_*ARP 15
我认为你已经有了答案,你应该使用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这样的东西说这样的东西(这不是垃圾邮件,我只是想帮忙).