title: slide table content from right to left
body: <p>I'm using the following 
  <a href="http://jsfiddle.net/ZSFFS/27/" rel="nofollow">http://jsfiddle.net/ZSFFS/27/</a>
  in my exaample but it won't slide i attach my code below please verify and let me know the what mistake i made, i can't able to found my mistake</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  .container{
      width:500px;
  height:250px;
  overflow:hidden;
  margin:10px;
  position:relative
  }
  .table{
  position:absolute;
  width:2000px;
  height:250px;
  left:0;
  
  background: -moz-linear-gradient(to right, red, orange, yellow, green, blue, indigo,           violet);
  }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  $('.next').click(function(event){
  if($('.table').css('left') != '-1500px') {
  $(this).prop('disabled', true)    
      $('.table').animate({left:'-=500px'}, 500, function() {
            $('.next').prop('disabled', false)    
      });
  }
  });
  
  
  $('.prev').click(function(event){
  if($('.table').css('left') != '0px') {
  $(this).prop('disabled', true)   
      $('.table').animate({left:'+=500px'}, 500, function() {
            $('.prev').prop('disabled', false)    
      });
  }
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;div class="table"&gt;
      &lt;table border="2"&gt;
          &lt;tr&gt;
              &lt;td&gt;sam&lt;/td&gt;
              &lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt; &lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;man&lt;/td&gt;&lt;td&gt;man&lt;/td&gt;&lt;td&gt;man&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;sam&lt;/td&gt;&lt;td&gt;bool&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;input type='button' class="prev" value='prev'&gt;
  &lt;input type='button' class="next" value='next'&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>it works well in <a href="http://jsfiddle.net/ZSFFS/27/" rel="nofollow">http://jsfiddle.net/ZSFFS/27/</a>
  Thanks in advance</p>