Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.12.2011, 21:25
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

Анимация по очереди
У меня есть десяток объектов, которые надо передвинуть один за другой. Как сделать чтобы они двигались по очереди?
Если просто написано:
$('#x1').animate({top: "+=50"}, 1000);
$('#x2').animate({left: "+=50"}, 1000);
$('#x3').animate({top: "-=50"}, 1000);
то они двигаются вместе.
Пока просто ставлю паузы перед ними (перед #х1 - 1000 милисекунд, перед #х2 - 2000 милисекунд), но объектов больше 20, и если вдруг надо вставить новый объект скажем после #х2, то потом приходится перещитывать паузы для всех последующих.
Можно ли как-то сделать чтобы все шли по очереди?
Ответить с цитированием
  #2 (permalink)  
Старый 13.12.2011, 21:27
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

$('#x1').animate({top: "+=50"}, 1000, function(){
    $('#x2').animate({left: "+=50"}, 1000, function(){
        $('#x3').animate({top: "-=50"}, 1000);
    });
});
Ответить с цитированием
  #3 (permalink)  
Старый 13.12.2011, 21:42
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

list= ["x1", "x2", "x3"];
var i=-1;
a= function(){
 if (i == list.length-1)
  return;
 ++i;
 $("#"+list[i]).animate({left: "+=50"}, 1000, a);
};
a();
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #4 (permalink)  
Старый 13.12.2011, 22:47
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

Спасибо за оба варианта
Правда, как я понял в варианте trikadin каждый раз будет выполняться одно и тоже действие. Правда можно туда поставить switch(i) {case... и для каждого номер испольнять свой код испольнять.
Ответить с цитированием
  #5 (permalink)  
Старый 13.12.2011, 23:14
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Можно просто расширить ф-цию...

list= [
 {id: "x1", prop: "left", action: "+=50"},
 {id: "x2", prop: "height", action: "-=10"},
 {id: "x3", prop: "left", action: "+=10"}
];
var i=-1;
a= function(){
 if (i == list.length-1)
  return;
 ++i;
 $("#"+list[i].id).animate({list[i].prop: list[i].action}, 1000, a);
};
a();
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #6 (permalink)  
Старый 14.12.2011, 01:40
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

Да, такой вариант значительно лучше...
А можно вопрос уже чуть в сторону: После того как я изменю параметр width (например когда маштабировал картинку), могу ли я его сбросить на дефаултный (тот который реально был у картинки) или после смены этого параметра, уже ни что не помнит исходных размеров и надо мне просто предварительно надо запоминать размеры?
Ответить с цитированием
  #7 (permalink)  
Старый 14.12.2011, 06:21
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Да, надо запоминать. Как я понял, animate не предоставляет способов для возвращения к исходным параметрам.

В первой книжке моего списка есть описание ф-ций, которые позволяют сохранить состояние элемента и вернуться к ним.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JQuery, анимация для нескольких элементов сразу, возможно ли? Logo jQuery 21 29.05.2012 20:50
Анимация движения Armen Общие вопросы Javascript 8 02.08.2011 17:32
Как сделать, чтобы скрипты срабатывали по очереди? To_wave Общие вопросы Javascript 8 19.09.2010 08:36
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 19:50
Цикличность анимация? SashaBorandi jQuery 1 25.12.2008 08:20