Question

I have come code that chains animations together (i.e. move left, then move right).

I have 20 of <li> tags laid out in a grid and I am animating the main <ul> to move the required <li> into view.

Code:
x and y are co-ordinates,
howFast is set to 1200,
easeItIn is set to “easeOutBounce”

if ($(window).width()<1259) { 
  if (screenFlipMode == "chained") {
    (function(x, y) { //Small Chained
      $('.elements').animate({
        top: y+'px'
      }, howFast, easeItIn,function() {
        $('.elements').animate({
          left: x+'px'
        }, howFast, easeItIn);
      });
   })(x,y); 
}

Now, the problem I have is that if I want to move from the first <li> to the second <li> then it still tries to move the Y-Axis (which means I have to wait 1200m/s until the X-Axis animation comes into play).

So… Lovely people… My question is, how can I write an if clause that would say “if target <li> is on the same row, then don’t do the Y-Axis animation…?

[EDIT] My grid is set up as follows, I want to disable the Y-Axis or X-Axis dependant on whether the next destination is on the same row. (IMAGE BELOW).

alt text http://demo.squeezedigital.com/barrie-test/jquery-grid.gif

>.<

Answer 1

Animations are queued by default, so there’s no point in applying the second animation within the first animation’s callback.

By using filter() you can filter out all of the elements that are not on the same row and then only apply the y animation to them, then you can apply the x animation to the entire collection.

$('.elements')
    .filter(function(){
        return $(this).offset().top !== y;
    })
    .animate({
        top: y
    }, howFast, easeItIn)
    .end().animate({
        left: x
    }, howFast, easeItIn);