Ampliar el div con la animación

Question

Tengo un div que está recibiendo el contenido de una llamada AJAX. En este momento sólo estoy haciendo esto en el controlador de devolución de llamada Ajax:

function searchCallback(html) { $("#divSearchResults").html(html); }

Esto hace que el contenido de "pop" en la página, y es muy abrupta. ¿Hay una manera de hacer el div con gracia cambiar el tamaño, al igual que el .slideToggle () método hace?

Answer 1

Usted podría tener escondido para empezar. A continuación, inserte el código HTML y cuando esa función se lleva a cabo, hacer un efecto de la presentación en ella. (Como su slideToggle)

Answer 2

Asegúrese de que está escondido, a continuación, añadir el contenido y simplemente deslizarse en.

$("#divSearchResults").hide();
$("#divSearchResults").html(html);
$("#divSearchResults").slideDown();

O bien, podría desaparecer en:

$("#divSearchResults").fadeIn();

Para asegurarse de que su página no "explote" cuando aparezca el contenido, asegúrese de que el div se oculta a estar con. Además, asegúrese de que una vez que se añade el contenido, la página se ve bien.

Answer 3

No estoy seguro de que esto funcionará, pero vale la pena probar:

• Para saber el tamaño div actual y establece lo arreglen.
• Actualizar HTML
• Animación de altura y anchura a "auto".

Answer 4

Claro, usted podría intentar esto:

function searchCallback(html) {
    var html_hidden = $('<div style="display:none;" class="hidden_insert">'+html+'</div>');
    $('#divSearchResults').html(html);
    $('#divSearchResults .hidden_insert').slideDown('medium');
}

No es la cosa más bonita pero funcionaría. Usted podría muy arriba, haciendo un estilo CSS para la clase 'hidden_insert' que haría un elemento con esa clase ocultados. Además, en su back-end, donde se está enviando desde esta fecha, se puede hacer la envoltura allí en vez de en su Javascript. El guión podría entonces ser simplificada a algo como:

function searchCallback(html) { 
    $('#divSearchResults').html(html).find('.hidden_insert').slideDown('medium');
}

No he probado ninguno de éstos, sino que debería funcionar.