jQuery在发布表单操作之前淡出页面答案

【问题标题】：jQuery fade page out before posting form actionjQuery在发布表单操作之前淡出页面
【发布时间】：2012-05-23 05:00:53
【问题描述】：

在发布表单操作之前，我必须淡出页面。我不确定这是否可能，所以我不知道从哪里开始。

也就是说，我确实知道如何为链接做这件事......下面的javascript。感谢您的帮助！

我需要从 HTML 表单中截取 post 方法

<form id="postitron" method="post" action="/postitron/answertron.php">

我用于anchor 标签的JavaScript

var $linkLocation;

function redirectPage(){
    window.location = $linkLocation;
}

$('a.transition').click(function(event){
    event.preventDefault();
    $linkLocation = this.href;
    $('#page').animate({opacity:0},400, function(){
        redirectPage();
    });
});

更新：

这么多答案！谢谢！

我已经全面实施了建议的要点，并且获得了无限循环的动画..我错过了什么？

我制作了一个 JSFiddle 来演示...它不会在无限循环中进行动画处理...但它也不会返回 404。奇怪！？

HTML

<form id="postitron" method="post" action="/postitron/answertron.php">
  <input type="hidden" name="acces" value"yes">
  <input id="submit" type="submit" value="DOIT">
</form>

JavaScript

$('#postitron').submit(function(e){
    e.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('#postitron').submit();
    });
});

更新 #2

@Ahren 建议 @Priyank Patel 使用 .one() 方法可以防止动画无限循环，它确实做到了（耶！），但我的控制台现在返回一个阻止表单提交的错误：

未捕获的类型错误：对象# 的属性“提交”不是函数

这是更新的 JavaSript

$('#postitron').one('submit', function(e){
    e.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('#postitron').submit();
    });
});

更新 #3

进一步考虑... .one() 方法为元素执行一次处理程序.. 是不是在动画消失后阻止执行相同的 submit() 方法？

更新 #4

jQuery animate in infinite loop

【问题讨论】：

试试我的代码和 jsfiddle ...如果它适用于您的页面，请告诉我...

标签： jquery html forms post fade

【解决方案1】：

您可以使用基本相同的代码，但改为绑定到表单提交。我相信 jQuery 足够聪明，不会无限循环。

$(<submitbutton>).click(function(event){
    event.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('form').submit();
    });
});

更新 - 根据 technopeasant 的反馈，您可以通过绑定到按钮的单击事件而不是提交事件来避免无限循环。

【讨论】：

谢谢你的回答，有道理。我已经尝试实现并且得到了你提到的无限循环。更新了上面的问题。非常感谢您的意见！
@technopeasant - 我看到你找到了解决无限循环问题的方法。我更新了我的答案以反映这一点。这是一个很酷的问题，当然也引起了很多关注。

【解决方案2】：

和你已经拥有的差不多。

$("#postitron").submit(function(e){
    e.preventDefault(); //stops the submission
    $("body").fadeOut(400, function(){
        handleFormSubmission(); 
    }); 
});

function handleFormSubmission(){
   // form submission code here.    
}

【讨论】：

感谢您的回答，它在技术上是正确的。我得到了一个奇怪的动画无限循环。更新了上面的问题。有什么想法吗？
@technopeasant 使用 PriyankPatel 的答案 - 'one.()' 方法应该可以修复您的无限循环。
你是对的，谢谢！它确实防止了无限循环......但现在我的控制台说“对象#的属性'提交'不是函数”代码与我更新的答案相同，但交换了提交和一个方法

【解决方案3】：

$('#postitron').one('submit', function(event) 
{
    event.preventDefault();
    // fadeout page here...
    $('#postitron').submit();
});

【讨论】：

【解决方案4】：

您可以对表单使用相同的方法：

阻止事件默认表单提交
淡出页面
动画完成后用javascript提交表单

【讨论】：

【解决方案5】：

只需在重定向之前调用$("body").fadeOut();，但在您的情况下，它不会向表单发送任何数据，只是一个常规重定向。也许您想发送数据，然后重定向。

应该是这样的：

$("a.transition").bind("click",function(e){
    e.preventDefault();

    var url = $(this).attr("href");

    var data = { /* handle your data and construct this object */ };

    $.post(url,data,function(){
        $("body").fadeOut(400,function(){
            window.location = url;
        });
    });
});

【讨论】：

【解决方案6】：

简单！

<form id="target" action="destination.html">
  <input type="text" value="Hello there" />
  <input type="submit" value="Go" />
</form>


            $('#target').submit(function() {
                $('input').fadeOut('slow', function() {
                    alert('Redirecting now ......Were yor Seatbelts');
                    return false;
                });
            });?

更新的 jQuery 代码：

<form id="postitron" method="post" action="/postitron/answertron.php">
  <input type="hidden" name="acces" value"yes">
  <input id="submit" type="submit" value="DOIT">
</form>


$('#postitron').submit(function() {
      $('input').fadeOut('slow', function() {
      alert('Redirecting now ......Were yor Seatbelts');
          //Will redirect to 404 in Jsfiddle
      return false;
  });
});

UPDATE2 :P http://jsfiddle.net/ipsjolly/ELKuL/5/

更新：http://jsfiddle.net/ipsjolly/ELKuL/3/

示例： http://jsfiddle.net/ipsjolly/ELKuL/1/

【讨论】：

您更新的小提琴确实会重定向，但不会褪色。见：jsfiddle.net/danielredwood/ELKuL/4

【解决方案7】：

一旦检查此代码，它可能会对您有所帮助：

<html>
        <head>
                <script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript">
                        $(document).ready(function(){
                            $("button").click(function(){
                                $("div").fadeOut(400,function(){
                                    alert(1)
                                    $("#form1").trigger("submit");
                                });
                            });
                        });
                </script>
        </head>
    <body>
    <div style="background:yellow;width:300px;height:300px">
        <form method="post" action="another.php" id="form1">
            <input type="text" value="hello this will hide">
                <button>Click to Fade</button>
        </form>
    </div>
    </body>
</html>

【讨论】：