Ознакомьтесь с нашей политикой обработки персональных данных
14:23 

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

Masque
Cherka Trova
Порылся в гугле, адекватного ничего по теме не нашел, все вокруг да около.
Задачка такая:
есть 4 блока, расположенных абсолютным позиционированием один на другом в центре окна. По клику на одном из них (очевидно, на верхнем), они должны одновременно разлетаться по углам окна (у первого top и left становятся 0, у второго top и right и т.д.).
Вопрос короткий - как сделать, чтобы эта анимация шла одновременно? Ну или по крайней мере почти одновременно.

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

@темы: CSS, JavaScript

Комментарии
2011-01-26 в 14:34 

Драконофил
Ученик золотой рыбки.

2011-01-26 в 14:54 

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

2011-01-26 в 15:00 

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

2011-01-26 в 19:52 

Nidjusan
Под Opera - каюсь, тестил мало, но должно работать.
по личным наблюдениям - если в огнелисе работает, в опере тоже будет

2011-01-26 в 21:42 

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

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

2011-01-26 в 22:19 

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

2011-01-26 в 23:05 

 
С общим классом сложнее, т.к. всем элементам будет задаваться одна и та же координата и нужно строить верстку так, чтобы элементы рисовались в нужных местах)
Вообще, в селекторе 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(...)');
      });

2011-01-27 в 00:39 

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

2011-01-27 в 00:51 

 
В очередь ставятся только анимации. 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'});
       }});

2013-04-19 в 03:24 

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);
}

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

URL
   

@web-программирование

главная