Animuj rozmiar DIV za pomocą jQuery bez znajomości ostatecznego rozmiaru - javascript, jquery, jquery-animate

Mam DIV z wstawioną treściądynamicznie za pomocą jQuery. Chcę, aby ten div wyglądał tak, jakby był powiększony z rozmiaru 0px do rozmiaru, który ma przyjąć, gdy div jest renderowany wraz z jego zawartością.

Treść to tekst, więc nie mam żadnych informacjio wielkości, jaką zajmie, gdy zostanie dołączony do dokumentu. Wiem, jak animować div za pomocą jQuery Animate, gdy znam ostateczny rozmiar, ale nie wiem, jak to zrobić, gdy tego nie wiem.

jeśli używam width: "+=10" na przykład dostaję div, który jest większy niż ten, który otrzymuję bez animowania. Dzięki.

Odpowiedzi:

Wstaw przedmiot, zapisz szerokość i wysokość,a następnie ustaw szerokość i wysokość elementu na zero. To stanie się zbyt szybko, aby było widoczne, a będziesz miał ostateczne wartości szerokości i wysokości potrzebne do animacji.

Live Demo

var $div = $("<div>", {
text: <your text>
});

// <append your element>

var width = $div.width();
var height = $div.height();

$div.css({
width: 0,
height: 0
});

$div.animate({
width: width,
height: height
}, {
duration: "slow",
easing: "linear"
});