Почему это перемещает элементы 4 раза? - PullRequest
Новая
       11

Почему это перемещает элементы 4 раза?

2 голосов
/ 20 марта 2009

Почему это не работает правильно? Эффект, которого я пытаюсь достичь, состоит в том, что блоки перемещаются слева направо и начинают «толкать» следующие. Кажется, это проблема с вложенными обратными вызовами, выполняющими анимацию на внешних элементах.

Может кто-нибудь объяснить это? Это работает, но все движется слишком много раз. 

<html>
<head>
<style>
.item { width: 49px; height: 49px; border: 1px solid orange; background-color: #ccccff; }
#i0 { position: absolute; left: 0px; }
#i1 { position: absolute; left: 150px; }
#i2 { position: absolute; left: 200px; }
#i3 { position: absolute; left: 250px; }
#i4 { position: absolute; left: 400px; }
#i5 { position: absolute; left: 450px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
jQuery(function() {
  $("#i0").animate({left:"+=100"}, function() { 
    $("#i0,#i1,#i2,#i3").animate({left:"+=100"}, function() { 
      $("#i0,#i1,#i2,#i3,#i4,#i5").animate({left:"+=50"});
    });
  });
});
</script>
</head>
<body>  
  <div id="i0" class="item"></div>
  <div id="i1" class="item"></div>
  <div id="i2" class="item"></div>
  <div id="i3" class="item"></div>
  <div id="i4" class="item"></div>
  <div id="i5" class="item"></div>
</body>
</html>

1 Ответ

3 голосов
/ 20 марта 2009

Второй аргумент animate () - это обратный вызов, который вызывается после завершения анимации. Поскольку $ ("# i0, # i1, # i2, # i3"). Animate (..) анимирует 4 объекта, он вызывает свой обратный вызов 4 раза. Такой подход может сработать: 

function move(i, left, callback) {
  $("#i"+i).animate({left:left}, callback);
}

function sequence(n, left, callback) {
  return function() {
    var i = 0;
    for (; i < n; i++) {
      move(i, left);
    }
    move(i, left, callback);
  }
}

jQuery(function() { move(0, "+=100", sequence(3, "+=100", sequence(5, "+=100"))) });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...