Espandere div con l'animazione

Question

Ho un div che sta ricevendo il contenuto da una chiamata AJAX. In questo momento sto solo facendo questo nel gestore di callback Ajax:

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

Questo rende il contenuto "pop" sulla pagina, ed è molto brusco. C'è un modo per rendere il div con grazia ridimensionare, come il .slideToggle () metodo non?

Answer 1

Si potrebbe avere nascosto per cominciare. Quindi inserire il codice html e quando è fatto quella funzione, fare un effetto show su di esso. (Come il tuo slideToggle)

Answer 2

Assicurati che la sua nascosta, quindi aggiungere il contenuto e basta far scorrere dentro.

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

Oppure si potrebbe svanire in:

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

Per assicurarsi che la pagina non "esplode" quando appare il contenuto, assicurarsi che il div è nascosta a stare con. Inoltre, assicurarsi che una volta che si aggiunge il contenuto, la pagina sembra a posto.

Answer 3

Non sono sicuro che questo funzionerà, ma vale la pena provare:

• Scopri dimensioni div corrente e impostarlo risolto.
• Aggiorna HTML
• Animare altezza e la larghezza di "auto".

Answer 4

Certo, si potrebbe provare questo:

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

Non è la cosa più bella, ma che avrebbe funzionato. Si potrebbe piuttosto in su facendo uno stile CSS per la classe 'hidden_insert' che avrebbe fatto un elemento con quella classe nascosta per impostazione predefinita. Inoltre, sul back-end, in cui si sta inviando questa data da, si potrebbe fare l'involucro lì invece che in Javascript. Lo script potrebbe quindi essere semplificata a qualcosa di simile:

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

Non ho ancora testato uno di questi, ma dovrebbe funzionare.