Анимация по очереди
У меня есть десяток объектов, которые надо передвинуть один за другой. Как сделать чтобы они двигались по очереди?
Если просто написано: $('#x1').animate({top: "+=50"}, 1000); $('#x2').animate({left: "+=50"}, 1000); $('#x3').animate({top: "-=50"}, 1000); то они двигаются вместе. Пока просто ставлю паузы перед ними (перед #х1 - 1000 милисекунд, перед #х2 - 2000 милисекунд), но объектов больше 20, и если вдруг надо вставить новый объект скажем после #х2, то потом приходится перещитывать паузы для всех последующих. Можно ли как-то сделать чтобы все шли по очереди? |
$('#x1').animate({top: "+=50"}, 1000, function(){
$('#x2').animate({left: "+=50"}, 1000, function(){
$('#x3').animate({top: "-=50"}, 1000);
});
});
|
list= ["x1", "x2", "x3"];
var i=-1;
a= function(){
if (i == list.length-1)
return;
++i;
$("#"+list[i]).animate({left: "+=50"}, 1000, a);
};
a();
|
Спасибо за оба варианта
Правда, как я понял в варианте trikadin каждый раз будет выполняться одно и тоже действие. Правда можно туда поставить switch(i) {case... и для каждого номер испольнять свой код испольнять. |
Можно просто расширить ф-цию...
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();
|
Да, такой вариант значительно лучше...
А можно вопрос уже чуть в сторону: После того как я изменю параметр width (например когда маштабировал картинку), могу ли я его сбросить на дефаултный (тот который реально был у картинки) или после смены этого параметра, уже ни что не помнит исходных размеров и надо мне просто предварительно надо запоминать размеры? |
Да, надо запоминать. Как я понял, animate не предоставляет способов для возвращения к исходным параметрам.
В первой книжке моего списка есть описание ф-ций, которые позволяют сохранить состояние элемента и вернуться к ним. |
| Часовой пояс GMT +3, время: 02:34. |