title: jquery animate from object center
body: <p>I am trying to create a product viewer similar to the one at the bottom of this page <a href="http://www.logitech.com/en-gb/" rel="nofollow noreferrer">http://www.logitech.com/en-gb/</a>. As you can see the product animates from the center rather than top left which I think is Jquery's default. So what I am doing is trying animate the width and height and then also the offset to make it look like it animates from the center.</p>
  
  <p>My code looks like this:</p>
  
  <pre><code>&lt;style&gt;
    body {
      background: black;
    }
    .box {
      background: #fff url('pic.jpg') no-repeat 0 0;
      width: 200px;
      height: 200px;
      margin: 10px 4%;
      float: left;
    }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $(".box").hover(function() {
              $(".box").not(this).fadeTo(500, 0.5);
              $(this).animate({
                  width: 300,
                  height: 300,
                  left: -100,
                  top: -100
              }, 500);
          },
          function() {
              $(this).animate({
                  width: 200,
                  height: 200,
                  left: 100,
                  top: 100
              }, 500);
              $(".box").fadeTo(500, 1);
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>
    
      
      
      
    </p>
  
  <p>I cannot seem to get this working as I want. Can anyone help with this or suggest a better technique? Many thanks</p>