jQuery顯示/隱藏表單+ Fancybox 2 =不工作

Question

我正在構建一個頁面，您可以點擊一個圖像來調出一個內聯Fancybox模式，該模式會爲您提供一些圖像信息。在這種模式下，如果單擊「下載」，內聯內容會淡出並且內聯表單淡入。

問題我遇到的問題是表單未在此處使用驗證插件進行驗證：bassistance.de/jquery-plugins/ jquery-plugin-validation/

如果我立即加載內聯表單而不是信息內容，它確實有效，所以我認爲它是fadeIn/fadeOut，這是問題。

任何人都遇到過這個問題或有任何建議嗎？

UPDATE：

下面是一些示例代碼：

在標題：

<style> 
    #info, #form{display:none;} 
</style> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" /> 
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script> 
<script src="validate.js"> 
<script> 
    $(document).ready(function(){ 
     $(".image").fancybox({ 
      maxWidth : 800, 
      maxHeight : 600, 
      fitToView : false, 
      width  : '70%', 
      height  : '70%', 
      autoSize : false, 
      closeClick : false, 
      openEffect : 'fade', 
      closeEffect : 'fade' 
     }); 

     button = $('.button'); 
     info = $('#info'); 
     form = $('#form'); 

     button.on('click', function(){ 
      info.fadeOut(); 
      form.fadeIn(); 
     }); 

     form.validate(); 
    }); 

在體：

<a href="#info" class="image"><img src="image.png" /></a> 

<div id="info"> 
    Here is some info on this thing! 
    <a href="#" class="button">Click here to download this thing!</a> 
</div> 

<div id="form"> 
    <form id="downloadform" action="#" method="post"> 
     <input type="text" class="required" name="" id="" value="" /> 
     <input type="text" class="required" name="" id="" value="" /> 
     <input type="text" class="required" name="" id="" value="" /> 
     <input type="submit" value="Submit" /> 
    </form> 
</div> 

Answer 1

嘗試初始化驗證插件的形式具有後已被淡入。您可以使用中的回調函數3210方法，因此可以在淡入淡出動畫完成後設置驗證，例如：

button.on('click', function() { 
    info.fadeOut(); 
    form.fadeIn(400, function() { 
     form.validate(); 
    }); 
});