Анимация с отрицательным смещением приводит к скачку элемента

#jquery #jquery-animate

#jquery #jquery-анимировать

Вопрос:

Это объясняется в названии. Вот как я это обнаружил (писал это в качестве ответа): http://jsfiddle.net/tnk7K/3 /

Как видно из примера, 2 анимация вправо и останавливается через секунду. Затем, еще через секунду, 2 переходит к крайнему левому краю и 3 анимируется, как сказано, только для того, чтобы это повторилось снова (и снова, и снова, и снова …)

Это не вызвано более поздним вызовом css('left', 'auto') , поскольку он вызывается после завершения анимации. Кроме того, его удаление не устраняет проблему.

Есть идеи, что это такое / как это решить / я просто ошибаюсь? Поиск в Google ничего не нашел.

1. Я не вижу описанного вами поведения — использование FF4.01 в Ubuntu Natty. Могу я спросить, какие настройки вы используете?

2. Chrome 12.0.742.53 на Win 7. Также происходит в IE8, на той же платформе.

3. Не уверен, чего вы пытаетесь достичь? Вы не хотите, чтобы цифры отображались в крайнем левом углу?

4. Я не понимаю, у вас есть 2 анимации, и divs ведут себя правильно. Помните, show() не ставится в очередь, как animate() .

5. Правильно, по крайней мере, в Chrome и IE, когда div достигает 100 пикселей вправо, при следующей анимации вместо анимации -20 влево он переходит в крайний левый. Затем он анимируется до -20 . Итак, вместо animateRight->animateLeft , animateRight->weirdJump->animateLeft .

Ответ №1:

Я думаю, что произошло какое-то недоразумение. Вы можете задать оба left и right в CSS.

http://jsfiddle.net/tnk7K/5/

Вы видите? right не изменилось, left установлено значение 0. Но width изменено.

РЕДАКТИРОВАТЬ:
Вам просто нужно установить left атрибут:

 $(this).css('left', $(this).position().left);

http://jsfiddle.net/tnk7K/7/

1. Ширина изменилась только при переходе; до этого анимация проходила нормально. Вы можете установить right в соответствии с left , но я ленив, и это проще.

2. left для свойства было установлено значение auto , нечисловое значение. Поэтому jQuery присвоил его значению 0. Итак, я только что определил вычисляемое значение для этого стиля.