jquery animate function and mimic the visuallightbox like effect
<p>EXAMPLE:
<a href="http://visuallightbox.com/lightbox-photo-software-sticky-notes-demo.html" rel="nofollow">http://visuallightbox.com/lightbox-photo-software-sticky-notes-demo.html</a> and click on any image to see how original image is showing.</p>

<p>I want to create the same effect with code instead of using a library.
The code that I'm using right now causes a similar effect, but it's not very smooth like visuallightbox.</p>

<p>Here is the code:</p>

<pre><code>&lt;ul&gt;
&lt;li&gt;thumb&lt;/li&gt;
&lt;li&gt;thumb&lt;/li&gt;
&lt;li&gt;thumb&lt;/li&gt;
&lt;li&gt;thumb&lt;/li&gt;
&lt;li&gt;thumb&lt;/li&gt;
&lt;li&gt;thumb&lt;/li&gt;
&lt;li&gt;thumb&lt;/li&gt;
&lt;li&gt;thumb&lt;/li&gt;
&lt;li&gt;thumb&lt;/li&gt;
&lt;/ul&gt;
&lt;div id="transition"&gt;&lt;div&gt;zoom effect&lt;div&gt;&lt;/div&gt;

$('ul li').click(function(e){
var $t = $('#transition'),
    to = $(this).offset(),
    td = $(document);

$t.children('div').css({width:100,height:100});
$t.css({
    top:  to.top + 50,
    left: to.left + 50,
    display: 'block'
}).animate({
    top:  td.height()/2,
    left: td.width()/2
}, 600, function(){
    $(this).animate({
        top: '-=75',
        left: '-=50'
    }, 600);
    $(this).children('div').animate({
        width:250,
        height:200
    }, 600, function(){
        // open dialog here
    });
});
});

$('#transition').click(function(e){
   $(this).hide();
});
</code></pre>

<p>How would I change this to get the desired effect?</p>

<p>fiddle: <a href="http://jsfiddle.net/HDmff/" rel="nofollow">http://jsfiddle.net/HDmff/</a> </p>
