Animacja zmiany wysokości elementu div, gdy zmienia się jego zawartość

Question

Mam div#menu, który wyświetla listę informacji. Ta informacja zmienia się poprzez ajax. Kiedy to się zmieni, chcę animować przejście z wysokości A na wysokość B.

Wiem, że mogę użyć .animate({'height': 'something'), ale nie wiem, jak to wszystko skleić.

Używam jQuery.

Jak mogę to zrobić?

Edytuj.

Ajax wywołanie wygląda tak:

$.ajax({ 
    url: $(this).data('redraw-event-url'), 
    dataType: 'script' 
    }) 

Answer 1

Można dodać nowy HTML DOM wyłączonym ekranie, dzięki czemu użytkownik nie może go zobaczyć. Następnie zdobądź jego wysokość i zmień wysokość kontenera tuż przed przeniesieniem nowego HTML z tymczasowej lokalizacji poza ekranem do miejsca docelowego. Coś takiego:

$.ajax({ 
    success : function (serverResponse) { 

     //add the new HTML to the DOM off-screen, then get the height of the new element 
     var $newHTML = $('<div style="position : absolute; left : -9999px;">' + serverResponse + '</div>').appendTo('body'), 
      theHeight = $newHTML.height(); 

     //now animate the height change for the container element, and when that's done change the HTML to the new serverResponse HTML 
     $('#menu').animate({ height : theHeight }, 500, function() { 

      //notice the `style` attribute of the new HTML is being reset so it's not displayed off-screen anymore 
      $(this).html($newHTML.attr('style', '')); 
     }); 
    } 
}); 

Answer 2

Musisz zrobić to w kilku krokach:

• pierwsze, umieścić nowe dane wewnątrz innego div, idealnie ukryte lub nawet na dom.
• drugie, dowiedzieć się, jak wysoki ten drugi div jest
• ustawić wysokość pierwszego div poprzez ożywionej, a gdy animacja jest zakończeniu wymienić zawartość

więc niektóre kod:

// put the content into a hidden div 
$('#hiddendiv').html(content); 

// get the target height 
var newHeight = $('#hiddendiv').height(); 

// animate height and set content 
$('#menu').animate({'height': newHeight}, function(){ 
    $('#menu').html($('#hiddendiv').html()); 
}); 

Answer 3

Miłym rozwiązaniem jest, aby uczynić obiekt div#menu na success zwrotnego

$.ajax({ 
    url: $(this).data('redraw-event-url'), 
    dataType: 'script', 
    success: function(){ 
     $('div#menu').animate({'height': 'something'); 
     } 
    }) 

nadzieję, że to pomaga

Answer 4

Wierzę mam czystsze, lepsze rozwiązanie obejmujące pojemnik:

<div id="menu_container"> 
    <div id="menu"> 
    <p>my content</p> 
    </div> 
</div> 

Co zrobić, jest to, że zablokowanie maxheight i minHeight pojemnika do aktualnej wysokości div. Następnie zmieniam zawartość wspomnianego div. I na koniec "zwalniam" maksymalną i minimalną wysokość kontenera do aktualnej wysokości wewnętrznego div:

$("#menu_container").css("min-height", $("#menu").height()); 
$("#menu_container").css("max-height", $("#menu").height()); 
$("#menu").fadeOut(500, function() { 

    //insert here the response from your ajax call 
    var newHtml = serverResponse; 

    $(this).html(newHtml).fadeIn(500, function() { 
     $("#menu_container").animate({minHeight:($("#menu").height())},500); 
     $("#menu_container").animate({maxHeight:($("#menu").height())},500); 
    }); 
});