animating a div based on its existing position

I am trying to animate a div -1500px every time my .btn-arrow button is clicked by grabbing the current position of #content

  var $offset = $('#content').offset.left()-1500;
    $('.btn-arrow').click( function(){ 
            $('#content').animate({marginLeft:$offset}); return false;
    });

<div style="margin-left: 0px; width: 99999px;" id="c开发者_JAVA技巧ontent">content </div>

Its not working though currently, any ideas anyone?

you need the correct sytax:

 {marginLeft:'-=1500'}

(mind the quotes and the -= that animates relative to the current value.

you don't need to use the offset.

but I guess you need :

{left:'-=1500'}

in this case

more here

offset() method returns offset object not the actual offset value.

the object returned by offset() method has two properties, left and top

so what you want to do is $offset.left - 1500

check the offset@jQuery API reference

offset is an object not a value. Access with offset.left and offset.top.