Javascript 回调函数和jQuery'；对每个迭代器进行排序_Javascript_Jquery_Callback_Jquery Animate_Each

Javascript 回调函数和jQuery'；对每个迭代器进行排序

javascript jquery

Javascript 回调函数和jQuery'；对每个迭代器进行排序,javascript,jquery,callback,jquery-animate,each,Javascript,Jquery,Callback,Jquery Animate,Each,我在调用每个迭代器后的回调函数时遇到困难下面是一个例子： <html> <head> <script type="text/javascript" src="jquery-1.4.min.js"></script> <script type="text/javascript" src="move.js"></script> </head> <body> <

我在调用每个迭代器后的回调函数时遇到困难

下面是一个例子：

<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运行？在动画完成后，有没有一种方法可以让我向下回调到redFlash

另外，有人知道javascript/jquery回调函数的在线资源或书籍吗？我的书在这个问题上有点离谱

编辑：在使用计数器时使用Pointy的指针解决。

$(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();

});

您的语法是有效的，但它无法实现您想要的功能

改为这样做：

示例：（更新）

基本上，您在

each（）

之后立即调用了

redFlash

。

each（）

没有回调函数，但是

.animate（）

函数有回调函数，因此回调函数需要用到回调函数

编辑：从

设置超时时间中删除了+600
。没有意义。
页面上每个元素的“id”属性必须是唯一的。您可能应该使用元素的“类”来描述它们，而不是“id”
 redFlash（）
调用前加逗号而不是分号有什么特别的原因吗？当你在问题中键入“pyquery”时，你的意思是“jQuery”，对吗？我在那里加了逗号，因为我认为回调函数就是这样调用的。回调不是通过在函数调用前加逗号来定义的。通常，当您看到回调时，前面有一个逗号，这是因为您在调用另一个函数时将该函数作为参数传递someFunc（“someArg”，callbackFunction）
需要编写函数以将回调函数作为参数处理。这不仅仅是自动的。@patrick好的，很明显每个（）都不是这样工作的。那么，我如何将回调合并到goingDown（）中呢？关于ID的好观点。我甚至懒得看HTML+1否，我想知道如何在每个迭代器内的所有动画完成后调用redFlash。您的版本将在第一个动画之后直接调用redFlash。@为此，您可能需要查看jQuery 1.5中添加的“延迟”功能。或者，您可以使用自己的计数器来跟踪哪些动画已经完成。@沙菲：是的，我明白您的意思。有几种方法可以做到这一点。您可以通过获取ani
元素的数量，将其乘以2000
，然后使用setTimeout来计算最后一个元素何时触发，从而延迟调用。我会更新的
$(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();

});

$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();