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(); 
    }); 
});