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;的容器中是否可行，并使用jQuery动画函数（如.show()或.slideDown()）来提供调整大小动画效果？< / p>

我已经创建了这个测试代码，虽然它可能需要一些小的调整，但我认为它接近要求：

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

动画调整jquery对话框的内容

1 个答案: