jQuery - 中心からアニメーションへdivを拡大

Question

申し訳ありませんが、以前はhide()またはshow()を実行してアニメーション化していたこれらのdivがありますが、それはきれいに見えません。IDはセンターから成長するようにしています。つまり、幅のないものから現在の幅まで成長する。

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