Employing Modernizr along with jQuery for Animation in Cases when CSS3 Transitions are Absent

Question

Employing Modernizr along with jQuery for Animation in Cases when CSS3 Transitions are Absent

Can Modernizr and jQuery be combined to create a transition effect similar to CSS3 if it's not supported? My current approach looks like this...

<div class="hoverable">
 <p>This div changes both width and height on hover</p>
</div>

The CSS is

.hoverable {
 height: 100px;
 width: 2000px;
 transition: height .5s, width .5s;
}

.hoverable:hover {
 height: 200px;
 width: 100px;
}

Right now, I'm using Modernizr to set the div in the hover state by default if CSS3 transitions aren't supported. Is there a way to utilize Modernizr to trigger jQuery animation in case CSS3 isn't supported? If not jQuery, I'm open to using custom animation, but unsure of how to proceed with either option.

javascript jquery css transition

Answer 1

Answer №1

Resolved this on my own. Here's the method I used

<!doctype html>
<html>
    <head>
        <title>Modernizr + jQuery Testing</title>
        <script type="text/javascript" src="modernizr.js"></script>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        if(!Modernizr.csstransitions) { // Checking for CSS transitions support
            $(function() {
                $('#js').hover(function(){
                    $(this).animate({width:'50px',height:'50px'},{queue:false,duration:500});
                }, function(){
                    $(this).animate({width:'100px',height:'100px'},{queue:false,duration:500});
                });
            });
        }
        </script>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            div {
                border: 1px solid red;
                height: 100px;
                margin: 25px auto;
                width: 100px;
            }
            #css {
                transition: height .5s, width .5s;
                -khtml-transition: height .5s, width .5s;
                -moz-transition: height .5s, width .5s;
                -o-transition: height .5s, width .5s;
                -webkit-transition: height .5s, width .5s;
            }
            #css:hover {
                height: 50px;
                width: 50px;
            }
        </style>
    </head>

    <body>
        <div id="js">
           JavaScript
        </div>
        <div id="css">
            CSS
        </div>
    </body>
</html>

It worked flawlessly. The CSS animation only runs in newer browsers, while the JS animation is targeted at older browsers. To implement this script, you can download modernizr from and jQuery from (naturally).

Answer 2

Resolved this on my own. Here's the method I used

<!doctype html>
<html>
    <head>
        <title>Modernizr + jQuery Testing</title>
        <script type="text/javascript" src="modernizr.js"></script>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        if(!Modernizr.csstransitions) { // Checking for CSS transitions support
            $(function() {
                $('#js').hover(function(){
                    $(this).animate({width:'50px',height:'50px'},{queue:false,duration:500});
                }, function(){
                    $(this).animate({width:'100px',height:'100px'},{queue:false,duration:500});
                });
            });
        }
        </script>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            div {
                border: 1px solid red;
                height: 100px;
                margin: 25px auto;
                width: 100px;
            }
            #css {
                transition: height .5s, width .5s;
                -khtml-transition: height .5s, width .5s;
                -moz-transition: height .5s, width .5s;
                -o-transition: height .5s, width .5s;
                -webkit-transition: height .5s, width .5s;
            }
            #css:hover {
                height: 50px;
                width: 50px;
            }
        </style>
    </head>

    <body>
        <div id="js">
           JavaScript
        </div>
        <div id="css">
            CSS
        </div>
    </body>
</html>

It worked flawlessly. The CSS animation only runs in newer browsers, while the JS animation is targeted at older browsers. To implement this script, you can download modernizr from and jQuery from (naturally).

Answer 3

Answer №2

Try using this code snippet:

if(!Modernizr.csstransforms) { // Check if CSS transitions are available
    $('#myElement').bind({
        mouseenter: function() {
            $(this).animate({
                width: 800,
                height: 700
            }, 1200);
        },
        mouseleave: function() {
            $(this).animate({
                width: 200,
                height: 250
            }, 1200);
        }
    });
}

Answer 4

Try using this code snippet:

if(!Modernizr.csstransforms) { // Check if CSS transitions are available
    $('#myElement').bind({
        mouseenter: function() {
            $(this).animate({
                width: 800,
                height: 700
            }, 1200);
        },
        mouseleave: function() {
            $(this).animate({
                width: 200,
                height: 250
            }, 1200);
        }
    });
}

Employing Modernizr along with jQuery for Animation in Cases when CSS3 Transitions are Absent

Answer №1

Answer №2

Similar questions

The feature "text-underline-position: under" is not functioning properly in Android Chrome

Issues arise when props do not get transferred successfully from the getStaticPaths() to the getStaticProps

Issue involving JSON data submission using JQuery Ajax POST

Grid items displaying incorrectly due to text alignment issues

What is the reason behind one function triggering a re-render of a component while the other does not in Next.js?

Images refusing to display within the div

Switch the contenteditable HTML attribute in a dynamically generated table using PHP

Is there a similar effect in jQuery? This is achieved using prototype

Connecting a specific URL of an API to a single mobile app: A step-by-step guide

When attempting to send data using jQuery to PHP, an issue arises where PHP is unable to receive the information, resulting in an undefined variable

Identify when two calendar dates have been modified

JavaScript/DOM - What sets apart a "CSS Selector" from an attribute?

Capturing the dynamic server response with nested JSON structures

Does anyone have any sample code on processing JSON data from a URL using Modified JavaScript Value in Java?

Prevent text wrapping and clear floats in a clean and hack-free way

Refreshing an HTML table with new data using jQuery and Ajax after a different selection

execute the $scope.watch function only when the field loses focus

What sets apart li.parent from ul?

Maintaining the current zoom level while updating a timeseries in Apache Echarts

What is the best way to programmatically route or navigate to a specific route within a Next.js class component?