使用fadeIn/fadeOut和load的Jquery对话框问题

Question

我的客户希望在加载室内页面时使用淡入淡出图像。这是相关页面：http://angelynngrant.com/mei3/ouragency.html 问题： (1) 淡入效果不起作用; (2) 淡出效果有效，但在“销毁”之前留下了一个幽灵矩形； (3) 经常在onload(和刷新时)，模态框出现在窗口左上角，然后“跳跃”到另一位置执行淡出操作。

我已经调整了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>

任何帮助都将不胜感激。（注：网站设计和风格尚未完成。）

- angelynng

---

我没有太多时间来研究这个问题，但有两点值得考虑。首先，也许淡入效果没有任何作用，因为图像已经是100％不透明度。不确定它是否需要从0开始，或者淡入效果是否会使其从0开始。其次，我认为对话框弹出时会移动页面上的HTML元素。由于您在窗口加载时打开它，我打赌淡入效果已经开始并且在对话框移动页面上的元素时被短暂地截断了。也许您可以在对话框的打开事件上开始淡入效果，并使用CSS隐藏img以开始。 - bygrace

这是开放事件：http://api.jqueryui.com/dialog/#event-open - bygrace

Answer 1

这里有一个演示，我制作了一个我认为符合你要求的演示。希望能对你有所帮助！

$(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 dialog提供的函数和一般的jQuery函数（例如，您使用了fadeIn，而不是配置对话框在调用show函数时淡入）。 这里有一个大列表列出了所有的函数和大量示例！

- David Spence

---

非常感谢您的所有帮助。它可以工作，尽管在fadeIn/fadeOut/destroy发生时没有使页面的其余部分变灰。不过，我不确定我的客户是否需要这种变灰效果。事实上，我将尝试劝阻她使用这些弹出效果。我认为在重复观看时可能会非常烦人。我在客户的愿景和良好设计之间犹豫不决。 - angelynng