如果CSS3过渡不存在，请使用Modernizr和jQuery进行动画处理

问题描述

| 如果不支持CSS3，是否可以使用Modernizr和jQuery的组合来启用类似于过渡的功能？我目前正在做的就是这样...

<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;
}

当前，如果不支持CSS3转换，则默认情况下，我仅使用Modernizr使div处于悬停状态。如果不支持CSS3，是否可以使用Modernizr触发jQuery动画？如果不是jQuery，那么我也可以使用自定义动画，但是我也不知道该怎么做。

解决方法

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

<!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\'},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只在旧浏览器中设置动画。如果使用此脚本，则可以从http://www.modernizr.com/获得modernizr，从http://www.jquery.com/获得jQuery（当然）。 ,您可以使用： if（！Modernizr.csstransitions）{//测试是否支持CSS转换 $（\'＃myDiv \'）。bind（{ mouseenter：function（）{ $（this）.animate（{ 宽度：1000，高度：1000 }，1000）； }， mouseleave：function（）{ $（this）.animate（{ 宽度：100，高度：100 }，1000）； } }）; }

不存在动画动画处理处理请使用过渡进行

如果CSS3过渡不存在，请使用Modernizr和jQuery进行动画处理

问题描述

解决方法

相关问答