Скорость анимации 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');
}
);