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