JQuery fallback for CSS3 transition

jquery css transition fallback

13,918

Solution 1

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).

Solution 2

Transit translates jQuery animate calls to CSS3 animations and falls back to regular js for unsupported browsers.

Alternatively you can extend $.support to check for transitions like this and use jQuery animate when the test for them fails.

13,918

Author by

fumpr

Updated on June 14, 2022

Comments

fumpr almost 2 years
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?