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() メソッドを使用すると、アニメーションが無限にループするのを防ぐことができると提案しましたが、それは実行されました (イェーイ!) が、私のコンソールは現在、フォームの送信を妨げているエラーを返しています:

キャッチされていない TypeError: オブジェクト # のプロパティ 'submit' は関数ではありません

これが更新されたJavaSriptです

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

アップデート #3

さらに考えてみると... .one() メソッドは、要素のハンドラを 1 回実行します。アニメーションがフェードすると、同じ 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

このコードを確認したら、役に立つかもしれません：

<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 に答える
0

Simple !

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

Updated jQuery Code:

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

UPDATE : http://jsfiddle.net/ipsjolly/ELKuL/3/

Example: http://jsfiddle.net/ipsjolly/ELKuL/1/

于 2012-05-23T05:16:38.877 に答える
0 
$('#postitron').one('submit', function(event) 
{
    event.preventDefault();
    // fadeout page here...
    $('#postitron').submit();
});
于 2012-05-23T05:04:48.660 に答える