Hi. I am trying to create a product viewer similar to the one at the bottom of this page http://www.logitech.com/en-gb/. 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.

My code looks like this:

<style>
  body {
    background: black;
  }
  .box {
    background: #fff url('pic.jpg') no-repeat 0 0;
    width: 200px;
    height: 200px;
    margin: 10px 4%;
    float: left;
  }

</style>

<script type="text/javascript">
    $(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);
        });
    });
</script>

I cannot seem to get this working as I want. Can anyone help with this or suggest a better technique? Many thanks