波濤洶涌的fancybox淡入聯內容

Question

我已經安裝了的fancybox插件，我有一個JS部分

<script type="text/javascript"> 
    function openFancybox(name) { 
     $.fancybox({ 
     'autoScale': true, 
     'transitionIn': 'fade', 
     'transitionOut': 'fade', 
     'type': 'inline', 
     'href': name, 
     'scrolling' : 'no', 
     afterClose: function(){ 
      $('div.qtip:visible').qtip('hide'); 
     } 
    }); 
    } 

    function showDialog(dialogId, title, message) { 
     $(dialogId + ' p').html(message); 
     $(dialogId + ' h3').html(title); 
     openFancybox(dialogId); 
    } 

    $(document).ready(function() { 
     showDialog('#info-dialog', 'Logout.', 'You are now logged out.'); 
    }); 
</script> 

而在HTML我有

<div id="info-dialog" class="dialog-holder"> 
    <div class="dialog"> 
     <div class="dialog-content"> 
      <a href="#" class="close-button close">Close</a> 
      <h3>Header.</h3> 
      <p>Paragraph.</p> 
      <a href="#" class="button large blue close">Close</a> 
     </div> 
    </div> 
</div> 

的問題是，當我打開一個頁面彈出窗口正在工作，但它非常不穩定：/關閉彈出窗口時淡出是平滑的，但淡入如此糟糕：/爲什麼？

Answer 1

Fancybox目前不直接支持自動啓動的方式。圍繞着我的工作就是創建一個隱藏的錨標籤並觸發它的onclick事件。確保包含jquery和fancybox js文件後，您的調用觸發onclick事件。我使用的代碼如下：

此示例腳本直接嵌入在html中，但它也可以包含在js文件中。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#hidden_link").fancybox().trigger('click'); 
    }); 
</script> 

來源：How to launch jQuery Fancybox on page load?。

試試這個和的fancybox將更加順暢