JQuery animate calculate pixel distance

I am using JQuery to animate a panel system menu. The problem is that there are 5 panels and I cannot set the panel left: attribute directly as it needs to calculate it based on its current position. My script should explain.

$('.panel').animate({left: '-250'}, 300);

So this is fine as on the first click it slides the first panel out of the view and the second panel into view. On a click in the second panel however it will not slide to t开发者_运维百科he third panel as it is telling all the panels .panel to move to left:-250. I want it to work out what the current left:?? is of .panel and then add a further -250 to animate.

That way if left:0 we are on the first panel and on a click we will go to left:-250. On click on the second panel it will add -250 + -250 and animate to -500 etc.. etc...

Any ideas?

You need to get the position using offset or offset parent.

http://api.jquery.com/offset/

http://api.jquery.com/offsetParent/

Something like this; (not tested)

    var offset = $('.panel').offset();
    alert(offset.left);
    alert(offset.top)
    var newpos = [offset.left - 250]
    $('.panel').animate({left: newpos}, 300);