JQuery fallback for CSS3 transition
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.
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;
}
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>
and how do I let the browser know it's a fallback so that they only pick the JQuery if it's IE?
Answer
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 ... ">
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 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: ... ;
}
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); });
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).