Скорость анимации jQuery?
Заключительное Редактирование: стене текста ниже может подвести итог простое выяснение, "может я указывать скорость анимаций с помощью jQuery animate()? Все, что обеспечивается, duration."
~~
jQuery animate() кажется, реализует упрощение несмотря на мое использование "линейных". Как я могу заставить эти два поля оставаться вместе до первых концов 250 пкс? Второе анимирует намного быстрее, потому что это имеет большее расстояние для движения.
Кроме того, существует ли плагин кольцевой галереи jQuery, который делает это (движение мыши на основе того, где Вы - mousing), таким образом, я не должен переписывать его? Я провел приблизительно 20 минут, ища один на Google, но не мог придумать ничего, что я любил.
ETA: пример, который я обеспечил, очень прост, но проблема когда я нашел его, применяется к основе более сложного кода. (1) Идете сюда. (2) Помещаете мышь на C. Гадюка, посмотрите скорость. (3) Помещаете мышь на Ryu, но прежде чем это закончится, переместите свою мышь в середину DIV (таким образом, это останавливается). (4) Откладываете свою мышь на левой стороне и видите, как совершенно медленный это перемещается.
Вычисление различий в скорости и расстоянии кажется непреодолимым здесь. Все, что я пытаюсь сделать, воссоздают прекрасный эффект, я видел использование сайта сегодня (этот сайт). Но это - Mootools, и я нахожусь в jQuery. = [
3 ответа
Для обновленного вопроса:
Во-первых, вот рабочая демонстрация с поведением, которое вы хотите. Здесь мы регулируем скорость в зависимости от количества, необходимого для перемещения, потому что скорость не является точным описанием, это продолжительность, перемещение на меньшее расстояние за ту же продолжительность означает более медленное перемещение, поэтому нам нужно масштабировать продолжительность с расстоянием, на которое нам нужно переместиться. Для движения назад это выглядит так:
var oldLeft = ul.offset().left;
ul.animate({left: 0}, -oldLeft * speed, 'linear');
Поскольку -oldLeft (это текущая левая позиция).
Для направления вперед очень похожий подход:
var newLeft = divWidth - ulWidth,
oldLeft = ul.offset().left;
ul.animate({left: newLeft + 'px'}, (-newLeft + oldLeft) * speed, 'linear');
Здесь мы получаем новое свойство Этот подход придает вашей переменной Для исходного вопроса:left, конец которого равен ширине левой позиции (также отрицательное, поэтому меняем его на противоположное).
speed совершенно новый смысл, теперь она означает "миллисекунды на пиксель", а не duration, как раньше, что, похоже, и было вашей целью. Другой оптимизацией является использование кэшированного
Держите его простым, просто половина времени для половины расстояния, как это:$(function() {
$('#a').animate({left: '250px'}, 500, 'linear');
$('#b').animate({left: '500px'}, 1000, 'linear');
});
linear только указывает, что анимация должна выполняться с линейными приращениями, а не ускоряться или замедляться по окончании. Если вы хотите, чтобы две анимации имели одинаковую скорость, просто удвойте время, необходимое для анимации, которая вдвое превышает расстояние:
$('#a').animate({left: '250px'}, 1000, 'linear');
$('#b').animate({left: '500px'}, 2000, 'linear');
что-то вроде этого ??
$('#a,#b').animate({left: '250px'}, 1000, 'linear',
function(){
$('#b').animate({left: '500px'}, 1000, 'linear');
}
);