Использование Modernizr и jQuery для анимации, если переходы CSS3 не существуют - PullRequest
Новая
       15

Использование Modernizr и jQuery для анимации, если переходы CSS3 не существуют

5 голосов
/ 23 мая 2011

Есть ли способ использовать комбинацию Modernizr и jQuery для включения чего-то похожего на переходы, если CSS3 не поддерживается?То, что я сейчас делаю, выглядит следующим образом ... 

<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, то я тоже мог бы использовать собственную анимацию, но я не знаю, как это сделать.

Ответы [ 2 ]

12 голосов
/ 24 мая 2011

Решил это сам.То, как я это сделал, было таким: 

<!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 один анимирует только в старых браузерах.Если вы используете этот скрипт, вы можете получить modernizr из http://www.modernizr.com/ и jQuery из http://www.jquery.com/ (конечно).

4 голосов
/ 23 мая 2011

Вы можете использовать: 

if(!Modernizr.csstransitions) { // Test if CSS transitions are supported
    $('#myDiv').bind({
        mouseenter: function() {
            $(this).animate({
                width: 1000,
                height: 1000
            }, 1000);
        },
        mouseleave: function() {
            $(this).animate({
                width: 100,
                height: 100
            }, 1000);
        }
    });
}
...