Функции обратного вызова и каждый итератор jQuery - PullRequest
Новая
       32

Функции обратного вызова и каждый итератор jQuery

0 голосов
/ 26 февраля 2011

Мне трудно вызвать функцию обратного вызова после каждого итератора.

Вот пример: 

<html>
  <head>
    <script type="text/javascript" src="jquery-1.4.min.js"></script>
    <script type="text/javascript" src="move.js"></script>
  </head>

  <body>
    <div>
      <div class="ani" style="position:relative; display: inline-block; top:10px; left:0px; width:30px; height:30px; background:#ddd;"></div>
      <div class="ani" style="position:relative; display: inline-block; top:10px; left:110px; width:30px; height:30px; background:#ddd;"></div>
      <div class="ani" style="position:relative; display: inline-block; top:10px; left:210px; width:30px; height:30px; background:#ddd;"></div>
      <div class="ani" style="position:relative; display: inline-block; top:10px; left:310px; width:30px; height:30px; background:#ddd;"></div>
    </div>
  </body>
</html>

$(document).ready(function(){

    $ani = $('div.ani'); 

    var redFlash = function(){
        $ani.eq(0).css('background-color','#e35');
    };

    var goingDown = function(){
        $ani.each(function(i){
            $(this).animate({'top':'100px'}, (i+1)*2000);
        }),redFlash()};

    goingDown();

});

redFlash Функция не вызывается, хотя.Я также пытался: 

var goingDown = function(){
    $ani.each(function(i){
        $(this).animate({'top':'100px'}, (i+1)*2000);
    }),function(){
        $ani.eq(0).css('background-color','#e35');
    };
};

безрезультатно.

Как заставить запуск RedFlash после всей анимации внутри каждый итератор завершен?Есть ли способ, которым я могу сделать goingDown обратный вызов redFlash после завершения анимации?

Кроме того, кто-нибудь знает какие-либо хорошие онлайн-ресурсы или книги для javascript / jqueryфункции обратного вызова?Книга, которая у меня есть, немного ненадежна по этой теме.

Редактировать: Решено с помощью указателя Пойнти на счетчиках. 

$(document).ready(function(){

$ani = $('div.ani'); 

var redFlash = function(){
$ani.eq(0).css('background-color','#e35');
};

var ani_size = $ani.length-1;
console.debug(ani_size);

var goingDown = function(){
$ani.each(function(i){
    $(this).animate({'top':'100px'}, (i+1)*2000, function(){
    console.debug(i);
    if (i == ani_size){
        redFlash();
    }
    });
});
};
goingDown();

});

Ответы [ 2 ]

1 голос
/ 26 февраля 2011

Атрибут "id" каждого элемента на странице должен быть уникальным . Вероятно, вам следует использовать «класс» элементов для их характеристики вместо «id».

1 голос
/ 26 февраля 2011

Ваш синтаксис действителен, но он не будет выполнять то, что вы хотите.

Сделайте это вместо:

Пример: http://jsfiddle.net/mXNz4/2/ (обновлено) 

$ani = $('div.ani'); 

var redFlash = function(){
    $ani.eq(0).css('background-color','#e35');
}

var goingDown = function(){
    var quantity = $ani.length;
    $ani.each(function(i){
        $(this).animate({'top':'100px'}, (i+1)*2000);
    });
    // schedule redFlash for the end of the last animation
    setTimeout( redFlash, quantity * 2000 );
}

goingDown();

По сути, вы сделали немедленный вызов redFlash после each().each() не имеет обратного вызова, но функция .animate() делает так, что именно туда и должен обращаться обратный вызов.

РЕДАКТИРОВАТЬ: Удалено + 600 изпродолжительность setTimeout.Не имеет смысла.

...