jquery - 等待触发器完成以使用 jquery 启动另一个触发器

Question

我有类似的东西：

$('#test').bind('go', function(event, top, left,w,h) {
  $('#test').animate({left: left, top : top, width: w,height: h},1000,function() {
     $('#test').animate({left: 0, top :0, width: w,height: h},1000)  ;      
  })
});

$('#test').trigger('go', [150, 200,100,80]);
$('#test').trigger('go', [250, 200,100,80]);
$('#test').trigger('go', [350, 200,100,80]);

但是第二个和第三个触发器在第一个触发器结束之前开始。我希望下一个 main.trigger 在上一个完成时启动。

试试看：http: //jsfiddle.net/9NLrR/6/

谢谢

Answer 1

您可以使用维护变量值来玩

var trigger=0;

main.bind('go', function(event, top, left,w,h,triggervalue) {

   if(triggervalue==trigger)
   { 
    bidule.animate({left: left, top : top, width: w,height: h},1000);
    trigger++;
   }

}

main.trigger('go', [150, 200,100,80,1]);
main.trigger('go', [250, 200,100,80,2]);
main.trigger('go', [350, 200,100,80,3]);

Answer 2

测试这个：

<div style="height:100px; width:100px; background-color:red; position:absolute;" id="test"></div>​

和脚本：

<script type="text/javascript">
    $('#test').bind('go', function(event, top, left,w,h) {
        $('#test').animate({left: left, top : top, width: w,height: h},1000);  
        $('#test').animate({left: 0, top : 0, width: w,height: h},1000);     
    });

    $('#test').trigger('go', [150, 200,100,80]);
    $('#test').trigger('go', [250, 200,100,80]);
    $('#test').trigger('go', [350, 200,100,80]);
</script>