2

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

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

我需要拦截来自的 post 方法的 HTML 表单

<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动画

4

7 回答 7

1

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

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

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

于 2012-05-23T05:04:20.387 回答
0

只需$("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;
        });
    });
});
于 2012-05-23T05:03:29.050 回答
0

和你已经得到的差不多。

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

function handleFormSubmission(){
   // form submission code here.    
}
于 2012-05-23T05:04:28.297 回答
0 
$('#postitron').one('submit', function(event) 
{
    event.preventDefault();
    // fadeout page here...
    $('#postitron').submit();
});
于 2012-05-23T05:04:48.660 回答
0

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

  1. 防止事件默认表单提交
  2. 淡出页面
  3. 动画完成后用javascript提交表单
于 2012-05-23T05:07:05.287 回答
0

简单的 ！

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

更新2 ：P http://jsfiddle.net/ipsjolly/ELKuL/5/

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

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

于 2012-05-23T05:16:38.877 回答
0

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

<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>
于 2012-05-23T05:31:34.357 回答