javascript - jQuery - 将 div 从中心增长到动画

Question

好吧，我有这些 div，我之前通过执行 hide() 或 show() 对其进行了动画输入/输出，但是看起来不干净，我喜欢让它们从中心向外生长，即从无宽度生长到当前宽度。

我是 jquery 动画新手，不知道如何正确执行此操作。我尝试将初始宽度设置为 0 并执行以下操作:

function panelIn(labDiv) {
  var neww = "700px";
  $(labDiv).animate({
    width: neww
  }, 2000);
}

但这会使 div 向右增长。我怎样才能实现这个目标？有没有好的库可以在 div 中进行动画处理，即在页面上介绍它们？

Answer 1

根据您正在执行的操作，您可能只想使用 CSS 和 .toggleClass()。

CSS

#labDiv{
   height:700px;
   width:700px;
   transform:scale(0);
   transform-origin:center center;
   transition: transform 2000ms ease;
}

#labDiv.show{
   transform:scale(1);
}

jQuery

function panelIn(labDiv){
    labDiv.toggleClass('show');
}