動畫調整jQuery對話框的內容

Question

我有一個ajax調用，它將取代jquery對話框中的內容。如何讓對話框將動畫調整大小爲內容的大小？我正在使用自動高度。

我創建對話框，如下所示：

$(function() { 
     $("#photo_library").dialog({ 
      modal: true, 
      show: 'fade', 
      hide: 'fade', 
      width: 950, 
      autoResize: true, 
      open: function(event, ui){$(".ui-dialog-titlebar-close").hide();} 
     }); 
    }); 

，我有另一個JavaScript函數將取代內部photo_library的HTML。所以，我想調整順利，以適應這一點。

Answer 1

將新的HTML內容插入到display:none;集合的容器中，並使用像.show()或.slideDown()這樣的jQuery動畫函數來提供調整大小動畫效果是否可行？

我創造了這個測試代碼，雖然它可能需要一些小的調整，我認爲這是接近要求：

<script type="text/javascript"> 

     function increaseContent() { 
      $("#photo_library").html('<div id="test" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec diam quis magna convallis malesuada in non urna. Fusce neque felis, tempor id viverra et, lobortis eu libero. Sed tincidunt condimentum metus et euismod. Quisque rutrum nisl ac dui vehicula eu tincidunt felis sodales. Nulla a mattis elit. Suspendisse vestibulum erat ut lacus semper dignissim. Vivamus imperdiet, tellus eget facilisis dictum, libero est ultrices felis, et tristique nibh dolor non ante. Duis vulputate neque nec libero ullamcorper in sollicitudin velit tincidunt. Nullam hendrerit risus at diam consequat lacinia id sit amet nulla. Duis turpis nulla, tristique sit amet sodales tempus, faucibus et tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur et eros sapien. Integer urna velit, dictum id interdum et, malesuada sed est. Sed tempor mauris velit, eu tincidunt eros. Pellentesque et lobortis odio. Praesent vestibulum, nibh in aliquam tempus, dolor felis pharetra enim, sit amet sagittis urna nulla quis turpis. Vivamus sit amet lectus eget purus laoreet porta. Nullam eget enim eget nisl venenatis ornare. Integer tempus consequat condimentum. Etiam cursus est tortor, nec porttitor dolor. Donec nec lectus ante. Duis laoreet blandit commodo. Donec mollis neque eget diam ornare dignissim sit amet eget tellus. Proin nec nibh non libero laoreet fringilla sed quis nisl. Cras eget lectus elit, eu facilisis lorem. In in velit diam, vitae placerat leo. Nulla eu nunc nec sem sagittis sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In odio mauris, iaculis sit amet placerat eu, tincidunt id lacus. Sed a egestas neque. Nam id molestie lectus. Fusce tincidunt elit vel nisi varius ut bibendum justo pellentesque. Nullam consequat urna quis est elementum laoreet. Proin ultrices pretium massa, et placerat arcu semper id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris tempor urna id eros pellentesque eu dignissim libero cursus. Praesent vitae quam libero, sed ornare magna. Maecenas eget pretium lorem. In at augue mauris, non mollis orci. Ut condimentum augue ac ipsum consequat luctus. Cras non imperdiet est. Praesent pellentesque adipiscing justo vitae lobortis. Vestibulum hendrerit metus eget turpis pretium rhoncus. Nulla facilisi. Ut metus leo, facilisis eget feugiat ac, pharetra sed velit. Aenean malesuada fermentum metus ac iaculis. Nullam et quam ut mi facilisis rhoncus at sed dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur malesuada accumsan volutpat. Sed pharetra, nulla vitae eleifend dictum, enim arcu euismod mauris, ac accumsan urna sapien nec lacus.</div>'); 
     } 
     function resizeContent() { 
      $("#test").slideDown(1500); 
     } 

     $(function() { 
      $("#photo_library").dialog({ 
       modal: true, 
       show: 'fade', 
       hide: 'fade', 
       width: 950, 
       autoResize: true, 
       open: function(event, ui){$(".ui-dialog-titlebar-close").hide();} 
      }); 

      setTimeout("increaseContent()", 5000); 
      setTimeout("resizeContent()", 6000); 
     }); 
    </script> 
    <div id="photo_library">Hello!</div>