Одновременная анимация нескольких объектов jquery

[Masque]

Порылся в гугле, адекватного ничего по теме не нашел, все вокруг да около.

Задачка такая:

есть 4 блока, расположенных абсолютным позиционированием один на другом в центре окна. По клику на одном из них (очевидно, на верхнем), они должны одновременно разлетаться по углам окна (у первого top и left становятся 0, у второго top и right и т.д.).

Вопрос короткий - как сделать, чтобы эта анимация шла одновременно? Ну или по крайней мере почти одновременно.

Заранее спасибо.

@темы: CSS, JavaScript

Comments

[Драконофил]

<div id="UL" style="position: absolute; top: 10px; left: 10px; border: 1px solid red; width: 30px; height:30px;"></div>
<div id="UR" style="position: absolute; top: 10px; left: 10px; border: 1px solid green; width: 30px; height:30px;"></div>
<div id="DL" style="position: absolute; top: 10px; left: 10px; border: 1px solid blue; width: 30px; height:30px;"></div>
<div id="DR" onClick="aa();" style="position: absolute; top: 10px; left: 10px; border: 1px solid violet; width: 30px; height:30px;"></div>

<sсriрt>
	function aa()
	{
		jQuery("#UL").animate({top: '0px', left: '0px'},500);
		jQuery("#UR").animate({top: '0px', left: '100px'},500);
		jQuery("#DL").animate({top: '100px', left: '0px'},500);
		jQuery("#DR").animate({top: '100px', left: '100px'},500);
	}
</sсriрt>

[Masque]

Спасибо)) Я - нуб, я знаю.

[Драконофил]

Все нормально
Одно но. В IE перекрытие считается слегка по другому, потому функцию лучше вешать на все сразу. Хуже не будет.
Под Opera - каюсь, тестил мало, но должно работать.

[Nidjusan]

Под Opera - каюсь, тестил мало, но должно работать.

по личным наблюдениям - если в огнелисе работает, в опере тоже будет

[Драконофил]

Не соглашусь. Временами firefox и opera внезапно ведут себя совсем по разному.
Например:
habrahabr.ru/blogs/javasсript/20916/

Это, конечно не jQuery.animate, но перепроверять всегда надо.

[Masque]

На самом деле можно на все элементы повесить общий класс и обратить обреботчик к классу. Тогда не надо будет считать, какой из них сверху.
Осталась в этом деле одна загвоздка на следующем шаге. Что делать, если нужно после окончания разлета прогрузить фон этого блока.
т.е. тупо $(".back").css('background-image','урл') не срабатывает, картинка прогружается сразу с началом анимации. Поставил подпорку через delay но это все таки не совсем очередь выходит.

[La personne mystique]

С общим классом сложнее, т.к. всем элементам будет задаваться одна и та же координата и нужно строить верстку так, чтобы элементы рисовались в нужных местах)
Вообще, в селекторе jQuery можно указать несколько CSS-путей, через запятую, они при этом объединяются (как в обычном CSS). Порой это дает заметный выигрыш в производительности. Это я к тому, что при фиксированном кол-ве элементов общий класс, в принципе, и не нужен.
   jQuery("#a, #b, #c, #d, .animated").animate(...);

У jQuery.animate() последний аргумент - callback, функция, выполняющаяся после завершения анимации.
Если не волнует возможная рассинхронизация на медленных машинах, можно даже так:
   jQuery("#DR").animate({top: '100px', left: '100px'}, 500, function() {
          jQuery(".back").css('background-image': 'url(...)');
      });

[Masque]

C колбэком вариант рассматривал, но думал есть вариант сделать очередь, первый шаг - синхронная анимация, второй - замена фона. Но попробую так, спасибо.

[La personne mystique]

В очередь ставятся только анимации. jQuery рассматривает именно callback как средство для построения более сложных анимаций. Правда, тут нужно следить за ситуацией, чтобы не столкнуться с stack overflow.
При большом желании функция .animate() может имитировать однократное присвоение стиля, при этом она ставится в очередь. Но выглядит это весьма коряво.
Так, например (чисто для примера - один из блоков на странице раздвигается до 500px, в конце ему задается красный фон):
   jQuery("#wrap-inner").animate({width: 500}, 500).animate({lala: 1}, {duration: 0, complete: function() {
          jQuery(this).css({'background-color': 'red'});
       }});

[Гость]

jquery 1.9.1 браузер safary.
Вариант:
function aa()
{
jQuery("#UL").animate({top: '0px', left: '0px'},500);
jQuery("#UR").animate({top: '0px', left: '100px'},500);
jQuery("#DL").animate({top: '100px', left: '0px'},500);
jQuery("#DR").animate({top: '100px', left: '100px'},500);
}

Выполняется по очереди. А надо чтобы одновременно.