Как поменять два элемента местами с помощью $().animate?

Question

[whatever73]

Здравствуйте.
Допустим, есть два блока с id - first_block, second_block с position:relative;
Я хочу поменять их местами с анимацией, с помощь $().animate.

var to = $('#first_block').position().left;
$('#second_block').animate({
      left: -to,
}, 700, function() {
});

to = $('#second_block').position().left;
$('#first_block').animate({
    left: +to,
}, 700, function() {
});

Боюсь, код ужасен и не работает (меняет как-то рандомно).
Подскажите, пожалуйста, как это сделать правильно?

Answer 1

[Mikhail Osher]

1) Никогда не используйте jQuery.animate - для этого есть Velocity.js.
2) А еще лучше - добавляйте/убирайте CSS классы, которые будут юзать transform: translate(x, y).

www.html5rocks.com/en/tutorials/speed/high-perform...

Comments

[IceJOKER]

Насчет первого пункта - можно узнать , почему такая критичность ?
Чтобы поменять два элемента местами подключить еще один js скрипт что ли ?О_О

[Mikhail Osher]

Если нужна одна анимация - можете использовать медленный громоздкий jQuery.animate. Если надо много анимаций и хотите производительность - ТОЛЬКО velocity.js