带有淡入/淡出和加载问题的 Jquery 对话框

Question

我的客户在加载内部页面时想要一个淡入/淡出图像。这是有问题的页面:http://angelynngrant.com/mei3/ouragency.html

问题: (1)淡入不起作用； (2) fadeOut 有效，但在“destroy”之前留下一个幻影矩形； (3)经常加载(以及刷新时)，模式出现在窗口的左上角，然后“跳跃”到淡出。

我调整了 CSS，使对话框的大多数元素消失和/或透明(例如 .ui-dialog .ui-dialog-titlebar {visibility:hidden; background:transparent;})。

我在标题中有负载:

<script type="text/javascript">                                         
    $(window).load(function() {                         
        $("#ModalSlide7").dialog({
            width: 564,
            height: 808,
            modal: true
        }); 
        $(".ui-dialog-titlebar").hide(); 
    });
</script>

我的模态框的其余部分都在正文中:

<div id="ModalSlide7">
    <img id="slide7" src="images/7.jpg" alt="Game of Authors vintage game">

    <script type="text/javascript">
        $('#slide7').fadeIn(3000, function() {
            $('#slide7').fadeOut(3000).queue(function (next) {
                $('#ModalSlide7').dialog('destroy').remove();
            });
        });
    </script>
</div>

任何帮助将不胜感激。

(注意:网站设计/样式尚未完成。)

Answer 1

Here is a demo我把我认为你想要的东西放在一起。希望这有帮助!

$(function () {

    // On document ready setup your dialog to define what happens
    // when it gets shown and hidden and some basic settings
    $("#dialog").dialog({
        autoOpen: false,
        draggable: false,
        resizable: false,
        show: {
            effect: 'fade',
            duration: 2000
        },
        hide: {
            effect: 'fade',
            duration: 2000
        },
        open: function(){
            $(this).dialog('close');
        },
        close: function(){
            $(this).dialog('destroy');
        }
    });

    $(".ui-dialog-titlebar").remove();

    // Finally open the dialog! The open function above will run once
    // the dialog has opened. It runs the close function! After it has
    // faded out the dialog is destroyed
    $("#dialog").dialog("open");
});

我认为您的困惑来自于 jquery ui 对话框和一般 jQuery 函数提供的混合函数(例如，您使用 fadeIn 而不是将对话框配置为在调用 show 函数时淡入)。 Here is a big list所有函数和大量示例!