title: jquery animate doesn't work
body: <p>Hi I have a simple slider with this codes:</p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div id="gallery"&gt;
      &lt;a href="#" id="left-arrow"&gt;..&lt;/a&gt;
      &lt;a href="#" id="right-arrow"&gt;..&lt;/a&gt;
      &lt;div id="container"&gt;
          &lt;div class="item"&gt;...&lt;/div&gt;
          &lt;div class="item"&gt;...&lt;/div&gt;
          ...
          &lt;div class="clr"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS Styles:</p>
  
  <pre><code>#gallery {
      position:relative;
      width:290px;
      height:200px;
      overflow:hidden;
  }
  #gallery #container{
      position:absolute;
      left:0px;
      top:0px;
      width:1160px;
  }
  #right-arrow, #left-arrow{
      width:30px;
      height:30px;
      position:absolute;
      top:85px;
      z-index:200;
  }
  #right-arrow{
      right:10px;
  }
  #left-arrow{
      left:10px;
  }
  </code></pre>
  
  <p>JS Codes:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
  // I must set left position explicitly if not when fetching left position it returns "auto"
  // I used position.left property, however. but It doesn't returns left relative 
  // to parent insted (I think) relative to document which (I don't know why? It is not 
  // according to Jquery documentation which position.left - .offset() is relative to document)
          $('#container').css('left', '0px'); 
          $('#right-arrow').click(function(){
              move('right');
          });
          $('#left-arrow').click(function(){
              move('left');
          })
  
          move = function (direction){
                  .
                  . 
                  .
              // The problem is here:
                  $('#container').animate(left:'+=290');
  
                  // although setting it's css left position doesnt work
                  $('#container').css('left', '290px');
  
                  // I return container to use it in console!
                  return $(#container');
          }
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>I used console to debugging it I found that it properly sets css position to whatever I want but actually it doesn't work
  Take a look at:</p>
  
  <p>Console:</p>
  
  <pre><code>&gt;&gt;&gt; var x = move()
  Object[div#container]
  
  &gt;&gt;&gt; x.css('left', '1000px')
  Object[div#container]
  
  &gt;&gt;&gt; x.css('left')
  "1000px"
  // But It doesn't move in reality 
  </code></pre>
  
  <p>I Hate Javascript, Please help me I don't know what is the problem</p>