使用Modernizr和jQuery来动画如果CSS3过渡不存在

本文介绍了使用Modernizr和jQuery来动画如果CSS3过渡不存在的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有没有办法使用Modernizr和jQuery的组合来启用类似于转换的东西，如果CSS3不支持？我现在做的是这样的...

Is there a way to use a combination of Modernizr and jQuery to enable something similar to transitions if CSS3 isn't supported? What I'm currently doing is like this...

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

CSS

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

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

我目前正在使用Modernizr使div处于悬停状态默认情况下，如果不支持CSS3转换。有没有办法使用Modernizr来触发jQuery动画如果CSS3不支持？如果不是jQuery，那么我也可以使用自定义动画，但我真的不知道如何做。

I'm currently just using Modernizr to make the div be in the hover state by default if CSS3 transitions aren't supported. Is there a way to use Modernizr to trigger jQuery animation if CSS3 isn't supported? If not jQuery, then I'd be fine using custom animation, too, but I don't really know how to do either.

推荐答案

自己解决了。我这样做的方式是这样

Solved this myself. The way I did was like this

<!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) { // Test if CSS transitions are supported
            $(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">
            JS
        </div>
        <div id="css">
            CSS
        </div>
    </body>
</html>

CSS只在新的浏览器中动画（因为这是唯一的地方），JS只在旧的浏览器中动画。如果您使用此脚本，则可以从和jQuery获取modernizr （当然）。

That worked perfectly. The CSS one only animates in new browsers (because that's the only place it can) and the JS one only animates in old browsers. If you use this script, you can get modernizr from http://www.modernizr.com/ and jQuery from http://www.jquery.com/ (of course).

这篇关于使用Modernizr和jQuery来动画如果CSS3过渡不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！