使用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對話框

回答

相關問題