Question

我正在构建一个页面，您可以在其中单击图像以显示内联Fancybox模式，该模式可为您提供有关图像的一些信息。在该模式中，如果单击“下载”，则内联内容将淡出，内联表单将淡入。

我遇到的问题是该表单未使用验证插件进行验证：bassistance.de/jquery-plugins/jquery-plugin-validation /

如果我立即加载内联表单而不是信息内容，它确实有效，所以我认为这是问题的fadeIn / fadeOut。

有人遇到此问题或有任何建议吗？

更新：

以下是一些示例代码：

在标题中：

<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

尝试在表单淡入后初始化验证插件。您可以在.fadeIn()方法中使用回调函数，以便在淡入动画完成后设置验证，如：

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

jQuery显示/隐藏表单+ Fancybox 2 =无效

1 个答案: