Expanda o div com animação

Question

Eu tenho uma div que está recebendo conteúdo de uma chamada de Ajax. No momento, estou apenas fazendo isso no manipulador de retorno de chamada do Ajax:

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

Isso torna o conteúdo "pop" na página e é muito abrupto. Existe uma maneira de fazer a divimimizar graciosamente, como o método .slideToggle ()?

Answer 1

Você poderia ter oculto para começar. Em seguida, insira o HTML e, quando essa função for feita, faça um efeito de programa nela. (como o seu slidetoggle)

Answer 2

Certifique -se de estar oculto e adicione o conteúdo e apenas deslize -o.

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

Ou você pode desaparecer em:

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

Para garantir que sua página não "exploda" quando o conteúdo aparecer, verifique se a div está oculta. Além disso, verifique se uma vez que o conteúdo seja adicionado, a página pareça boa.

Answer 3

Not sure this will work, but worth trying:

• Find out current div size and set it fixed.
• Update HTML
• Animate height and width to "auto".

Answer 4

Sure, you could try this:

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

Not the prettiest thing but it would work. You could pretty it up by making a CSS style for the class 'hidden_insert' that would make a element with that class hidden by default. Also, on your backend, where you are sending this date from, you could do the wrapping there instead of in your javascript. The script could then be simplified to something like:

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

I haven't tested either of these but they should work.