0

ここに問題を示す JSFiddle があります... http://jsfiddle.net/L2NBP/5/ 明らかな理由から、このコードは私の実際のコードの単純化されたバージョンであり、以下にも示されています。

CSS

#frame { left:0; position:absolute; width:190px; }
.layer { background:#FFF; position:absolute; right:0; top:0; width:190px; }
#process { z-index:1; }
#contact { z-index:2; }
#message { z-index:3; }

HTML

<div id="frame ">
    <div id="process" class="layer">Processing...</div>
    <div id="contact" class="layer"># Results Found</div>
    <div id="message" class="layer">Results Updated</div>
</div>
<button onclick="javascript:ajaxMessage();">Click Here</button>

JS 

function ajaxMessage(){
    // if( $('#message').is(":animated") ) return;
    $('#contact').fadeOut('slow',function(){
         $('#message').fadeIn('slow')
                      .animate({opacity:1.0},1000)
                      .fadeOut('slow',function(){
                          $('#contact').fadeIn('slow');
                      });
    });
}​

詳細

AJAX に送信するフォームがあります.load()。入力に ​​UI Slider http://jqueryui.com/demos/slider/を使用しています。私は範囲オプションを使用しており、フォームにいくつかの入力「スライダー」があるため、AJAX は 1 秒間に複数回呼び出される可能性があります。完了すると成功メッセージが表示され.load()ます。上記の JS Fiddle リンクでわかるように、メッセージは.animate() http://api.jquery.com/animate/を使用してアニメーション化されます。

問題は、最初のアニメーションが完了する前に、メッセージを表示する関数が複数回呼び出されることです。これが発生すると、ユーザーがフォーム値の変更を停止した後も、アニメーションが積み重なって「点滅」します。私はこれを試しました... if( $('#message').is(":animated") ) return;...しかし、まだスムーズに動作しません。基本的に、アニメーションの継続時間を動的に延長する方法を理解するか、少なくともそのように動作するように見せる必要があります。または、ユーザーがフォームに最後の変更を加えるまで、成功メッセージを遅らせます...例: ユーザーが変更を行ってから 2 秒が経過するまで、メッセージは表示されません。

何か案は？

受け入れられた回答

実際に受け入れられた回答... http://jsfiddle.net/L2NBP/7/

これをhttp://jsfiddle.net/L2NBP/5/のオリジナルと比較して ください。違いを確認するには、ボタンを 1 ～ 2 秒間に複数回クリックし、ボタンの右側にある応答テキストを確認してください。

4

1 に答える 1

3

あなたの質問が正しければ、

stop()を使用する必要があります

このような、

$('#message').stop().fadeIn('slow').animate({opacity:1.0},1000).fadeOut('slow',function(){
        $('#contact').fadeIn('slow');
});

また、2 つ目のアニメーションを実行し、1 つが完了すると、

var msg = $('#message');
msg.stop().fadeIn('slow',function(){
    msg.animate({opacity:1},1000,function(){
        msg.fadeOut('slow',function(){
            $('#contact').fadeIn('slow');
        })
    })
});
于 2012-07-05T11:31:12.037 に答える