jQuery動畫散布div

Question

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

但是有一件事使我發瘋。 我如何像其他燈箱一樣為div制作動畫。 從中間開始，並擴展到每一側。 我很無奈。

jQuery提供的特殊緩動屬性是否有可能？

這是要檢查的jsFiddle。

$('#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示例

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