Форум

alx1 · #1 (**permalink**) 17.05.2013, 14:14

Суть задачки Лабораторная работа создать анимацию сортировки массива...

все получается вот только проблема в том что последовательных перемещений добиться не получилось, все выполняется параллельно что не очень наглядно

с 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-го - третий

mta88 · #2 (**permalink**) 17.05.2013, 16:08

а вы хоть официальную справку 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);
    });
});

теперь вроде по очереди

alx1 · #3 (**permalink**) 17.05.2013, 16:19

Есть возможность уйти от 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-ов?

Deff · #4 (**permalink**) 17.05.2013, 18:31

alx1,
В цикле добавлять объекты к очереди анимации(массив объектов с анимационными параметрами), плюс функция обработки очереди

alx1 · #5 (**permalink**) 17.05.2013, 20:40

Сообщение от Deff

alx1,
В цикле добавлять объекты к очереди анимации(массив объектов с анимационными параметрами), плюс функция обработки очереди

идея ясна, простенький пример как это делается привести можно?, я плохо разбираюсь в языке сам не справлюсь

alx1 · #6 (**permalink**) 18.05.2013, 00:19

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>

Форум

Справочник

Discord чат

Курсы javascript