CSS3转换的JQuery回退 [英] JQuery fallback for CSS3 transition
问题描述
我正在寻找一个简单的CSS3转换代码的JQuery / JS回退。
我的javascript是真的基本的，所以我不容易找到和写一个替换代码。我已经签出了modernizr，但我真的不明白很多文档。
I'm looking for a JQuery/JS fallback for a simple CSS3 transition code. My javascript is really basic so it's not easy for me to find and write a replacement code. I already checked out modernizr but I did not really understand a lot of the documentation.
这是一个使用 transform：rotate（20deg） / code>时悬停（这是没有问题，因为它支持在IE）。
但问题是转换，我使用
It's an icon that uses transform: rotate(20deg) when hovering over (this is no issue as it supports in IE).
But the problem is the transition, I'm using
.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（）; 但我不知道我将如何编码这个。
这样的东西：
is there a JQuery fallback for this? I was thinking about fadeIn(); but I have no idea how I would code this.
something like this?:
<script>$(icon).hover(function (){$(icon).fadeIn("slow");}); </script>
如何让浏览器知道这是一个后备，所以他们只选择JQuery ？
and how do I let the browser know it's a fallback so that they only pick the JQuery if it's IE?
推荐答案
我认为你已经有答案，你应该使用modernizr，它不复杂，现代化方法指定哪些是可用的特征，哪些不是，第一个是通过HTML元素中的一组CSS类：
I think you already have the answer, you should use modernizr, it is not complicated as you think, there are two ways that modernizr specify which are the features available and which are not, the first one is through a set of CSS classes in the HTML element:
<html class="js no-flexbox canvas canvastext postmessage no-websqldatabase ... ">
如果可用，它将显示名称，如果不可用，它将显示名称如no-flexbox，第二个是通过javascript：
if it is available it will appear the name, if it is not available it will appear the name with a "no-" preffix like "no-flexbox", the second one is through javascript:
if(!Modernizr.csstransitions)
Modernizr有一组布尔变量，可以告诉你它是否可用，你想为你的动画设置一个备用我建议你使用Modernizr类来为具有此功能的浏览器指定动画：
Modernizr has a set of boolean variables that can tell you if it is available or not, so if you want to set a fallback for your animation I would suggest that you use the Modernizr classes to specify the animation only for the browsers which has this feature:
.csstransitions #element{
-webkit-transition: ... ;
-moz-transition: ... ;
-o-transition: ... ;
-ms-transition: ... ;
transition: ... ;
}
，然后使用modernizr检查的变量创建一个javascript文件如果没有则指定动画：
and then create a javascript file with the variables that modernizr has checking if the feature is available, if it is not then specify the animation:
if(!Modernizr.csstransitions)
$("#element").hover(function(){ $(this).animate({ ... your animation ... }, 5000); });
这可能会给你一个想法Modernizr是如何工作（我希望），无论如果你有一个问题可以查看此博文我很久以前所做的说这样的东西，像CSS3PIE（这不是垃圾邮件，我只是试图帮助）。
this might give you an idea how Modernizr works (I hope), anyway if you have a problem you may check this blog post I made a long time ago, it says something like this with some other things like CSS3PIE (this is not spam, I am just trying to help).
这篇关于CSS3转换的JQuery回退的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
