Animate thay đổi chiều cao của div khi nội dung của nó thay đổi

Question

Tôi có một div#menu hiển thị danh sách thông tin. Thông tin đó thay đổi thông qua ajax. Khi thay đổi, tôi muốn tạo hiệu ứng chuyển tiếp từ chiều cao A đến chiều cao B.

Tôi biết tôi có thể sử dụng .animate({'height': 'something') nhưng tôi không biết cách kết hợp tất cả những thứ này lại với nhau.

Tôi đang sử dụng jQuery.

Tôi có thể làm như thế nào?

Chỉnh sửa.

Cuộc gọi ajax trông như thế này:

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

Answer 1

Bạn có thể thêm mã HTML mới vào DOM off-màn hình để người dùng không thể nhìn thấy nó. Sau đó, lấy chiều cao và thay đổi chiều cao của vùng chứa ngay trước khi di chuyển HTML mới từ vị trí tắt màn hình tạm thời đến đích cuối cùng của nó. Một cái gì đó như thế này:

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

Bạn sẽ cần phải làm điều này trong một vài bước sau:

• Thứ nhất, đưa các dữ liệu mới bên trong một div khác nhau, tốt nhất là giấu hoặc thậm chí không có tên trong dom.
• Thứ hai, tìm ra cách cao div thứ hai này là
• Đặt chiều cao của div đầu tiên qua Animate, và một khi các hình ảnh động là xong, thay thế nội dung

vì vậy một số mã:

// 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

Một giải pháp tốt đẹp là để làm cho đối tượng div#menu trên success callback

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

hy vọng điều này giúp

Answer 4

Tôi tin rằng tôi có một trình dọn dẹp, giải pháp tốt hơn liên quan đến một container:

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

Những gì tôi làm là tôi khóa maxHeight và minheight của container với chiều cao hiện tại của div. Sau đó, tôi thay đổi nội dung của div nói. Và cuối cùng tôi "giải phóng" chiều cao tối đa và tối thiểu của vùng chứa lên chiều cao hiện tại của div bên trong:

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