Centering an element to the viewable area with Jquery
<p>I have a huge scrollable area. In one section I have a grid of thumbnails. When clicked, the thumb is cloned and animates out to the center of the screen, but it animates to the center of the entire area, not the area that you are viewing i;e, the area of have scrolled to. How can I get it to animate to the center of the viewable area? JQuery Code is as follows:</p>

<pre><code>var $article = $('#news-articles .news-article').eq(index);
var $articleClone = $article.clone(true);  // clone the article for the corresponding link

// Create the expanded item container
var $expandedItem = $('&lt;div&gt;', {
id: 'item-expanded',
css: {
      width: 188,
  height: 188,
  background: '#fff',
  position: 'absolute',
  zIndex: 999
  },    
}); 

$expandedItem.append($img);  //Add the cloned image to the expanded item container              

$('body').append($expandedItem);  //Add the shaded overlay and the expanded item to the body

//Animate the size of the expanded item
    $expandedItem.animate({
        width: 400,
        height: 400,
        left: $(window).width()/2,
        top: $(window).height()/2,
        marginTop: -400/2,
        marginLeft: -400/2,
        }, {
            duration: DDBR.constant.ITEM_ANIMATION_SPEED,
            easing: DDBR.constant.ITEM_ANIMATION_EASING,
            queue: false,
            complete: function() {
                animFinished = true;
                if (animFinished) {
                    imageFade();                            
                    }
                }
            });
</code></pre>

<p>Please note that I have tried changing the positioning of $expanded item to 'fixed'. However, this creates a problem as it needs to animate from the position of the clicked thumbnail which I obtain using the thumb's 'offset'. Changing the positioning of $expandedItem causes it to animate from the thumb's position when it is first loaded, not it's current position after the page has been scrolled.</p>

<p>Hope it all makes sense. Any help with this would be greatly appreciated.</p>

<p>Thanks in advance.</p>
