jquery animate函数并模仿visuallightbox之类的效果

Question

实施例： http://visuallightbox.com/lightbox-photo-software-sticky-notes-demo.html并点击任意图片以查看原始图片的显示方式。

我想用代码创建相同的效果而不是使用库。 我现在使用的代码会产生类似的效果，但它不像visuallightbox那样平滑。

以下是代码：

<ul>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
</ul>
<div id="transition"><div>zoom effect<div></div>

$('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();
});

如何更改此设置以获得所需效果？

小提琴：http://jsfiddle.net/HDmff/