使用fadeIn/fadeOut和加载问题的jquery对话框

我的客户端在加载内部页面时需要fadeIn/fadeOut图像。这是有问题的页面：http://angelynngrant.com/mei3/ouragency.html 使用fadeIn/fadeOut和加载问题的jquery对话框

问题：（1）fadeIn不起作用; （2）fadeOut工作，但在'destroy'之前留下一个幻影矩形; （3）通常在载入（并在刷新时），模态出现在窗口的角落的左上角，然后“跳跃”到fadeOut。

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

任何帮助将不胜感激。

（注：网站设计/造型没有完成）

来源

2013-02-12 angelynng

我没有太多时间来研究这一点，但有两点想法。首先，也许FadeIn不会做任何事情，因为图像已经100％不透明。不知道它是否需要从0开始，或者如果fadeIn将使它从0开始。其次是我认为对话框在页面弹出时会移动html元素。既然你在窗口加载打开它，我敢打赌，当对话框在页面周围移动元素时，fadeIn已经开始并被缩短。也许你可以在对话框打开的事件中开始淡入淡出，并用CSS隐藏img开始。 – bygrace 2013-02-12 21:42:07

这里是开放活动：http://api.jqueryui.com/dialog/#event-open – bygrace 2013-02-12 21:43:19

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所有的功能和大量的例子！

来源

2013-02-12 23:09:08

非常感谢所有的帮助。它的工作原理，尽管在fadeIn/fadeOut/destroy发生的时候不会使页面的其他部分变灰。不过，我不确定我的客户需要变灰。事实上，我会试图阻止她从这些弹出的效果。我认为这反复观看可能会非常烦人。我在客户的愿景和良好的设计之间撕裂。 – angelynng 2013-02-13 15:47:14

使用fadeIn/fadeOut和加载问题的jquery对话框

回答

相关问题