Question

I have something like :

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

but the 2nd et 3rd trigger start before the end of the first one. i want the next main.trigger start when the previous is complete.

Try it : http://jsfiddle.net/9NLrR/6/

thanks

Answer 1

test this:

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

and script:

<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>