Make a hovered element move to the centre (horizontally) of the viewport with jQuery when clicked
<p>I currently have several divs that enlarge when hovered. The user can then open a details DIV (fixed size) on a click function. </p>

<p>What I'm trying to figure out is how to move the hovered element to the middle of the viewport and then open the details div. (timeout function I guess). </p>

<p>When the users mouse leaves the element (function already exists), it slides back and reduces in size back to its original position.</p>

<p>Fiddle: <a href="http://jsfiddle.net/yJ7ps/1/" rel="nofollow">http://jsfiddle.net/yJ7ps/1/</a></p>
