JQuery 'Choppy' анимация - простой тестовый пример - PullRequest
Новая
       14

JQuery 'Choppy' анимация - простой тестовый пример

6 голосов
/ 15 апреля 2011

Вот простой тестовый пример для анимации Div с использованием абсолютного позиционирования и jQuery. 

<html>
<head>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
    <script type='text/javascript'>
        function slide(){
            $('#box').animate({'left': 0},3000);
        }   
    </script>
</head>
<body>
    <button onclick="slide()">slide</button>
    <div id="box" style="position: absolute; width: 120px; height: 100px; background: #ff0000; left: 500px"></div>
</body>

В Firefox 4 (на Mac) анимация «слезится» и очень запинается. В Safari и Chrome он лучше, но все же имеет видимое дрожание.

Упрощая проблему до приведенного выше теста, я не совсем уверен, куда идти дальше. Это ошибка JQuery? Я что-то упускаю из-за абсолютного позиционирования, которое может привести к перерисовке браузера? Был бы невероятно признателен, если бы некоторые люди могли попробовать приведенный выше код и подумать .... даже если бы это только убедило меня, что я не схожу с ума:)

1 Ответ

1 голос
/ 15 апреля 2011

зачем использовать onclick="slide()", если вы хотите скользить по нажатию кнопки, тогда выполните следующие действия:

CSS 

#box {
       position: absolute;
       width: 120px;
       height: 100px;
       background: #ff0000;
       left: 500px;
}

HTML (назначить некоторый идентификатор) 

<button id="slide">slide</button>
<div id="box">whetever</div>

JQuery 

<script type='text/javascript'>
$(document).ready(function (){
    $('button#slide').click(function(){
            $('#box').animate({'left': 0},3000);
        });
});   
</script>

Рабочая ДЕМО

ОБНОВЛЕНИЕ (с jQuery1.6 )

Плавная анимация

Кроме того, jQuery теперь использует новый метод requestAnimationFrame предоставляется браузерами, чтобы сделать наш анимации еще более плавные. Мы можем использовать эта функциональность, чтобы избежать вызова таймеры и вместо этого зависят от браузер для обеспечения наилучшего опыт анимации. 

.promise()

Так же, как $.ajax() до него, $.animate() получает «отложено» . Объекты jQuery теперь могут возвращать Promise, чтобы наблюдать, когда все анимации в коллекции завершены: 

$(".elements").fadeOut();

$.when( $(".elements") ).done(function( elements ) {
    // all elements faded out
});

С ПОМОЩЬЮ:)

...