Анимировать изменение размера JQuery диалог к ​​содержанию - PullRequest
Новая
       3

Анимировать изменение размера JQuery диалог к ​​содержанию

3 голосов
/ 26 августа 2011

У меня есть вызов 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, которая заменяет HTML внутри photo_library. Итак, я хотел бы плавно изменить размер, чтобы соответствовать этому.

1 Ответ

2 голосов
/ 02 сентября 2011

Можно ли было вставить новое содержимое HTML в контейнер с установленным display:none; и использовать функцию анимации jQuery, например .show() или .slideDown(), чтобы обеспечить эффект изменения размера анимации?

IЯ создал этот тестовый код, и, хотя он может нуждаться в незначительных изменениях, я думаю, что он близок к требованиям: 

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