1

誰かが私を助けてくれるのではないかと思います。

これは非常に基本的な質問であり、申し訳ありませんが、jQueryを使い始めたばかりなので、ご容赦ください。

ここでのチュートリアルの作業から、Submitボタンでトリガーされる以下のコードを使用しています。

$(document).ready(function(){
    $(this).scrollTop(0);
    $('#addlocation').submit(function(){

        //check the form is not currently submitting
        if($(this).data('formstatus') !== 'submitting'){

            //setup variables
            var form = $(this),
                formData = form.serialize(),
                formUrl = form.attr('action'),
                formMethod = form.attr('method'), 
                responseMsg = $('#saverecordresponse');

            //add status data to form
            form.data('formstatus','submitting');

            //show response message - waiting
            responseMsg.hide()
                       .addClass('response-waiting')
                       .text('Please Wait...')
                       .fadeIn(200);

            //send data to server for validation
            $.ajax({
                url: formUrl,
                type: formMethod,
                data: formData,
                success:function(data){

                    //setup variables
                    var responseData = jQuery.parseJSON(data), 
                        klass = '';

                    //response conditional
                    switch(responseData.status){
                        case 'error':
                            klass = 'response-error';
                        break;
                        case 'success':
                            klass = 'response-success';
                        break;  
                    }

                    //show reponse message
                    responseMsg.fadeOut(200,function(){
                        $(this).removeClass('response-waiting')
                               .addClass(klass)
                               .text(responseData.message)
                               .fadeIn(200,function(){
                                   //set timeout to hide response message
                                   setTimeout(function(){
                                       responseMsg.fadeOut(250,function(){
                                           $(this).removeClass(klass);
                                           form.data('formstatus','idle');
                                       });
                                   },1000)
                                    setTimeout(function() { 
                                    $('body').fadeOut();}, 2000); 
                                });
                    });
                }
            });
        }

        //prevent form from submitting
        return false;
    });
});
</script>

コードは機能しますが、スクリプトの最後で少し問題があります。正確には、次のようにします。

setTimeout(function() { 
$('body').fadeOut();}, 2000);

これにより、2秒後にページが正しくフェードアウトしますが、少し遅れてページをフェードインし直したいと思います。

私はこのサイトの多くの投稿を読み、以下を取り入れようとしました：

$(this).fadeOut().next().delay(500).fadeIn();

しかし、ページのフェードアウトまたはフェードインに失敗したため、どこかで何か間違ったことをしましたが、正直に言って、何を間違えたのかよくわからないと言わなければなりません。

誰かがこれを見て、既存のコードを組み込む方法を教えて、フェードインする前に時間遅延を追加できるかどうか疑問に思いました。

よろしくお願いします

4

1 に答える 1

0

多くの解決策があります。それは私があなたの質問を正しく理解した場合です。しかし、あなたのコードを見た後、私は次のコードフラグメントが役立つかもしれないと思います。

setTimeout(function() { 
         $('body').fadeOut(400, function(){
              setTimeout(function(){
                   $('body').fadeIn(400);
              }, 500);
         });
    }, 2000);

これはうまくいくはずだと思います。

サーバーからのデータの取得が完了した直後にページをフェードインさせようとしている場合は、$。ajax呼び出しで実装された「complete」イベントを使用してみてください。

私はそれが役立つことを願っています:)頑張ってください

編集：@torazaburoはより微妙な解決策を提案しました。

$('body').delay(2000).fadeOut(500).delay(500).fadeIn(400).
于 2012-06-29T16:19:09.457 に答える