动画调整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>