Question

我有一个脚本，显示2个div并在用户提交表单后隐藏1个div。表单的目标是同一页面上的Iframe。 Iframe需要一段时间才能加载。

我想延迟隐藏/显示事件，直到加载Iframe。我能够通过加载动画执行此操作，但我不确定如何使用隐藏/显示脚本执行此操作。

这是隐藏/显示脚本

$(function () {
    $('#form_710370').submit(function (e) {
        e.preventDefault(); // add this
        $('#form_container').hide()
        $('#mydivhide1, #mydivhide2').show();
        return false;
    });
});

这是HTML

<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>

<div id="form_container">
    <form id="form_710370"  target="iframe" method="post" convert.php">
        <input id="Website" name="url1" type="text" value=""/> 
        <input id="saveForm" type="submit" name="submit" value="submit" />
    </form> 
</div>

这是相关的CSS

#mydivhide1 {display:none;}
#mydivhide2 {display:none;}

Answer 1

试试这个

timeout = setTimeout(function () {
   $('#form_container').hide();
}, 6000);

Answer 2

检测到您的iFrame已加载：

$('#YourIframe').load(function(){

});

在提交的表单上

$("#form_710370").on('ajax:complete',function(){

});

Answer 3

将隐藏和显示代码放在iframe load（）函数中。

$('#frame').load(function(){
   $('#form_container').hide();
   $('#mydivhide1, #mydivhide2').show();
});

Answer 4

// delay
setTimeout(function () {
    // after delay 
    $('#form_container').animate({
        'height': '0px'
    }, '400', 'swing', function () {
        // finish animate fadeIn
        $('#mydivhide1, #mydivhide2').fadeIn('400');
    });
}, '700');

希望是帮助

如何延迟隐藏/显示事件，直到提交后加载Iframe

4 个答案: