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