jQuery - wachsen div von der Mitte zu animieren in

Question

In Ordnung, ich habe diese divs, die ich animiert haben in/out zuvor durch hide() oder show(), aber das sieht nicht sauber aus und ich mag sie aus dem Zentrum wachsen, dh von der Breite von nichts zu ihrer aktuellen Breite wachsen.

Ich bin neu in jQuery Animationen und weiß nicht, wie man das richtig macht. Ich habe versucht, die anfängliche Breite auf 0 einzustellen und zu tun:

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

Aber das wächst das div nach rechts. Wie kann ich das erreichen? Gibt es etwas Gutes, Bibliotheken für die Animation in divs, d. H. Die Einführung auf der Seite?

Answer 1

Je nachdem, was Sie tun, möchten Sie vielleicht nur CSS und .toggleClass() verwenden.

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