İçindekiler değiştiğinde bir div yüksekliğinin değişikliğini canlandırın

Question

Bir bilgi listesi görüntüleyen bir div#menu var. Bu bilgi ajax ile değişir. Değiştiğinde, A yüksekliğinden B yüksekliğine geçişi canlandırmak istiyorum.

.animate({'height': 'something')'u kullanabileceğimi biliyorum, ancak bunların hepsini nasıl yapıştırılacağını bilmiyorum.

jQuery kullanıyorum.

Bunu nasıl yapabilirim?

Düzeltme.

ajax çağrı şuna benzer: kullanıcı bunu göremez böylece

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

Answer 1

Sen ekran dışı DOM yeni HTML ekleyebilir. Ardından yüksekliği alın ve yeni HTML'yi geçici ekran dışı konumdan son hedefe taşımadan önce kabın yüksekliğini değiştirin. Böyle bir şey:

$.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

Sen adımları bir çift bunu gerekir:

• Birincisi, ideal olarak gizlenmiş farklı bir div içine yeni veri koymak veya hatta dom.
• İkinci olarak, bu ikinci div
• canlandırılır yoluyla birinci div yüksekliğini ayarlama kadar uzun anlamaya ve animasyon tamamlandıktan sonra, içerik

yerine bu nedenle bazı 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

güzel çözüm success Geri aramada div#menu nesneyi işlemek için olan

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

umut bu, ben daha temiz olduğuna inanıyorum bir kap içeren daha iyi bir çözüm

Answer 4

yardımcı olur:

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

Ne yapmak olduğunu ben bugünkü yüksekliğine kabın maxHeight ve MinHeight kilitlemek olduğunu div. Daha sonra sözü edilen divun içeriğini değiştiririm. Ve sonunda kabın maksimum ve minimum yüksekliğini iç divun mevcut yüksekliğine "serbest bırakıyorum":

$("#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); 
    }); 
});