Последовательная анимация JQuery
Суть задачки Лабораторная работа создать анимацию сортировки массива...
все получается вот только проблема в том что последовательных перемещений добиться не получилось, все выполняется параллельно что не очень наглядно с JS я на "вы", цель добиться последовательности действий в анимации всю суть задачи можно свести к следующем коду
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
function create() {
var a=$("#xs0");
var b =$("#xs1");
var c= $("#xs2");
a.animate({left:String(a.position().left+100)+"px"},1000);
b.animate({left:String(b.position().left+200)+"px"},1000);
c.animate({left:String(c.position().left+300)+"px"},1000);
}
</script>
</head>
<body>
<input type="button" onclick="create()" value="dvigaem" />
<div style="position: absolute; line-height:0px;width: 1000px;height: 400px;background: #cccccc;">
<div id="xs0" style="position: absolute;top:00px;left:0px; width: 40px;height: 40px;background: #ff0000;" >1</div>
<div id="xs1" style="position: absolute;top:00px;left:0px; width: 40px;height: 40px;background: #00ff00;" >2</div>
<div id="xs2" style="position: absolute;top:00px;left:0px; width: 40px;height: 40px;background: #0000ff;" >3</div>
</div>
<script> create(); </script>
</body></html>
надо чтобы обекты двигались последовательно тоесть сначала 1-ый, после окончания второй , а после окончания движения 2-го - третий |
а вы хоть официальную справку http://api.jquery.com/animate/ читали? она вроде не сложная
a.animate({left:String(a.position().left+100)+"px"},1000, function() {
b.animate({left:String(b.position().left+200)+"px"},1000, function() {
c.animate({left:String(c.position().left+300)+"px"},1000);
});
});
теперь вроде по очереди |
Есть возможность уйти от callback-ов? ввиду того что вызов методов анимации разбросан по рекурсивным процедурам.... здесь привел код для 3 элементов чтобы было самому проще разобраться как управлять последовательностью, скажем так мне нужно что-то что может заставить вот это работать последовательно
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
function create() {
for (i=0;i<=2;i++){
$("#xs"+String(i)).animate({left:String($("#xs"+String(i)).position().left+100)+"px"},1000);
}
}
</script>
</head>
<body>
<input type="button" onclick="create()" value="dvigaem" />
<div style="position: absolute; line-height:0px;width: 1000px;height: 400px;background: #cccccc;">
<div id="xs0" style="position: absolute;top:00px;left:0px; width: 40px;height: 40px;background: #ff0000;" >1</div>
<div id="xs1" style="position: absolute;top:50px;left:0px; width: 40px;height: 40px;background: #00ff00;" >2</div>
<div id="xs2" style="position: absolute;top:100px;left:0px; width: 40px;height: 40px;background: #0000ff;" >3</div>
</div>
</body></html>
обход элементов объединил в цикл.... (разместил все вертикально чтобы наглядно было видно) как в этом случае быть???? отказаться от циклов в пользу callback-ов? |
alx1,
В цикле добавлять объекты к очереди анимации(массив объектов с анимационными параметрами), плюс функция обработки очереди |
Цитата:
|
Deff,
Огромное спасибо за идею, тк язык JS и его токости я не знаю получилось криво но получилось, в смысле работает последовательно, пришлось делать через callback функции animate, для анимации сортировки масива из 10 элементов получается 78 вызов метода и строка('st') в 5000 символов длиной
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
var animArray = new Array(); //сюда кладу анимацию последовательно ввиде строк(( пло другому не знаю как парсить
//обработка массива анимации, рекурсивно достает элементы из масива и собирает строку
function extrAnimArray(i){
var s;
if (i>animArray.length-1) { return " );"; }
else {
if (i ==0) {s = animArray[i]+extrAnimArray(i+1)}
else {
s = ", function(){"+animArray[i]+extrAnimArray(i+1)+"});"
}
}
return s;
}
function create() {
for (i=0;i<=2;i++){
// было
// $("#xs"+String(i)).animate({left:String($("#xs"+String(i)).position().left+100)+"px"},1000);
//
//изменил на заполнение массива анимаций
s="$(\"#xs"+String(i)+"\").animate({left:\""+String($("#xs"+String(i)).position().left+100)+"px\"},1000" ;//завершающую скобку специально не ставлю(чтобы потом не удалять, да и не знаю как это на js делается)
animArray.push(s); //поместим строку в массив
}
//тут я вызываю обработку массива анимации
st = extrAnimArray(0);
//первая функция которая мне попалась которая может из строку выполнить как функию...
setTimeout(st, 1000);
}
</script>
</head>
<body>
<input type="button" onclick="create()" value="dvigaem" />
<div style="position: absolute; line-height:0px;width: 1000px;height: 400px;background: #cccccc;">
<div id="xs0" style="position: absolute;top:00px;left:0px; width: 40px;height: 40px;background: #ff0000;" >1</div>
<div id="xs1" style="position: absolute;top:50px;left:0px; width: 40px;height: 40px;background: #00ff00;" >2</div>
<div id="xs2" style="position: absolute;top:100px;left:0px; width: 40px;height: 40px;background: #0000ff;" >3</div>
</div>
</body></html>
|
| Часовой пояс GMT +3, время: 03:09. |