jQuery的動畫傳播div

Question

我想提高我的jQuery技能，因此我寫了自己的燈箱。

但有一件事讓我發瘋。我怎樣才能像其他燈箱動畫一個div。從中間開始，向各方展開。我很無奈。

這是由jQuery提供的特殊緩動屬性可能嗎？

Here is jsFiddle to inspect.

$('#clickme').click(function() { 
    $('#book').animate({ 
    width: 'toggle', 
    height: 'toggle' 
    }, { 
    duration: 5000, 
    specialEasing: { 
     width: 'linear', 
     height: 'easeOutBounce' 
    }, 
    complete: function() { 
     $(this).after('<div>Animation complete.</div>'); 
    } 
    }); 
}); 

我希望有人能幫助我:)

Answer 1

您也可以動畫div的頂部和左側位置給予調整相對於元素的中心作用。

jsFiddle example

$('#clickme').click(function() { 
    $('#lightbox').fadeIn(); 
    $('#lightbox').animate({ 
     width: 500, 
     height: 250, 
     top:5, 
     left:10 
    }); 
});​ 

Answer 2

替換此，jQuery的。 關閉你打開的div。 感謝'j08691'的幫助。

$('#clickme').click(function() { $('#lightbox').fadeIn(); $('#lightbox').animate({ width: 500, height: 250, top:5, left:10 });}); $('#lightbox').click(function() { $('#lightbox').animate({ width: 0, height: 0, top:0, left:0, }).fadeOut(); });