Question

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

那说，我做知道怎么做链接... 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（）方法会阻止动画无限循环，这样做（耶！），但我的控制台现在返回一个阻止表单提交的错误：

未捕获的TypeError：对象＃的属性'submit'不是函数

这是更新的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

Answer 1

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

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

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

Answer 2

只需在重定向之前调用$("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;
        });
    });
});

Answer 3

与你已经拥有的很相似。

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

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

Answer 4

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

Answer 5

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

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

Answer 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/

Answer 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>

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

7 个答案: