Скорость анимации jQuery?

Окончательное редактирование. Стена с текстом ниже может быть суммирована простым запросом: "Можно ли указать скорость анимации с помощью jQuery animate()? Все, что предоставляется, - это duration."

~~

jQuery animate() похоже, реализует ослабление, несмотря на то, что я использую "линейный". Как я могу получить две коробки, чтобы оставаться вместе до тех пор, пока первая не закончит @250px? Второй анимирует гораздо быстрее, потому что у него больше расстояния.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function()
    {
        $('#a').animate({left: '250px'}, 1000, 'linear');
        $('#b').animate({left: '500px'}, 1000, 'linear');
    });
</script>

<div id="a" style="background-color: red; position: relative; width: 50px; height: 50px;"></div>
<br/><br/>
<div id="b" style="background-color: red; position: relative;width: 50px; height: 50px;"></div>

В качестве альтернативы есть ли карусель jQuery, который делает это (движение мыши основано на том, где вы mousing), поэтому мне не нужно переписать его? Я потратил около 20 минут на поиск в Google, но не мог придумать что-нибудь, что мне понравилось.

ETA. Приведенный мной пример очень прост, но проблема, которую я обнаружил, применяется к более сложной базе кода. (1) Перейдите сюда. (2) Наведите мышку на C. Viper, посмотрите скорость. (3) Наведите мышь на Рю, но прежде чем она закончится, переместите мышь в середину DIV (чтобы она остановилась). (4) Положите свою мышь назад на левую сторону и посмотрите, как она медленно замедляется.

Вычисление различий в скорости и расстоянии представляется здесь непреодолимым. Все, что я пытаюсь сделать, это воссоздать прекрасный эффект, который я видел сегодня на сайте (этот сайт). Но это Mootools, и я в jQuery. = [

Ответы

Ответ 1

Для обновленного вопроса:
Во-первых, здесь рабочая демонстрация с поведением, которое вы хотите. То, что мы делаем здесь, - это настройка скорости на основе количества, необходимого для перемещения, потому что speed не является точным описанием, это длительность, перемещение на более короткое расстояние в течение одной и той же продолжительности означает более медленный ход, поэтому нам нужно масштабируйте продолжительность с расстоянием, которое нам нужно переместить. Для перемещения назад это выглядит так:

var oldLeft = ul.offset().left;
ul.animate({left: 0}, -oldLeft * speed, 'linear');

Так как <ul> прокручивается с отрицательной левой позицией, нам нужно переместить инверсию из этого количества пикселей, чтобы вернуться к началу, поэтому мы используем -oldLeft (текущая позиция left).

Для прямого направления очень похожий подход:

var newLeft = divWidth - ulWidth,
    oldLeft = ul.offset().left;
ul.animate({left: newLeft + 'px'}, (-newLeft + oldLeft) * speed, 'linear');

Это получает новое свойство left, а конец - шириной <ul> минус ширина <div>. Он вычитает (это отрицательный так добавляет), что из текущей позиции left (также отрицательный, поэтому отмените его).

Этот подход дает вашей переменной speed совершенно новое значение, теперь это означает "миллисекунды на пиксель", а не продолжительность, которую она делала раньше, что, похоже, является тем, что вы после. Другая оптимизация использует этот кешированный селектор <ul>, который у вас уже был, что делает вещи немного быстрее/чище в целом.

По оригинальному вопросу:
Держите его просто, всего в половине случаев на половину расстояния, например:

$(function() {
    $('#a').animate({left: '250px'}, 500, 'linear');
    $('#b').animate({left: '500px'}, 1000, 'linear');
});

Здесь вы можете попробовать демо

Ответ 2

Я создал плагин, который делает именно то, что вы хотите. Вы можете использовать Supremation, чтобы указать скорость анимации в отличие от продолжительности.

Ответ 3

linear указывает только, что анимация должна выполняться линейными приращениями, а не ускоряться или замедляться по мере ее завершения. Если вы хотите, чтобы две анимации имели одинаковую скорость, просто удвойте время, которое требуется для анимации, вдвое превышающей расстояние:

$('#a').animate({left: '250px'}, 1000, 'linear');
$('#b').animate({left: '500px'}, 2000, 'linear');

Ответ 4

что-то вроде этого??

демо

$('#a,#b').animate({left: '250px'}, 1000, 'linear',
    function(){
       $('#b').animate({left: '500px'}, 1000, 'linear');   
    }
);