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

Question

Окончательное редактирование : Стену текста ниже можно подвести итог, просто спросив: «Могу ли я указать скорость анимации, используя jQuery's animate()? Все, что предоставляется, это duration.»

~~

JQuery's 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, который делает это (движение мыши зависит от того, где вы находитесь)так что мне не нужно переписывать это?Я потратил около 20 минут на поиск одного в Google, но не смог найти ничего, что бы мне понравилось.

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

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

Answer 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 совершенно новое значение, теперь она означает "миллисекунд на пиксель" вместо duration , как это было раньше, что кажетсябыть тем, что вы после.Другая оптимизация использует тот кешированный селектор <ul>, который у вас уже был, что делает все немного быстрее / чище в целом.

---

Для исходного вопроса:
Сохраняйте это простымтолько половина времени на половину расстояния, например:

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

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

Answer 2

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

Answer 3

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

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

Answer 4

как-то так ??

демо

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