jQueryの：フェード・アウト、アクションを実行し、フェージング戻るには

StackOverflow https://stackoverflow.com/questions/2165387

  •  24-09-2019
  •  | 
  •  

質問

だから私は、HTMLフォームに相当するものがあるが、それ自体は、実際の<form>ではありません。私は現在、すべてのフィールドにデフォルトにリセットするために使用していますことを「クリア」ボタンがあります。

審美的な観点から、私はそれが完全にリセットで「ゴーン」、およびフェードバックだが、リセットをフェードアウトするフォームのためにしたいと思います。私はこれを達成しようとするこれまでのところ、このコードを持ってます：

function Reset() {

    $formDiv.fadeOut(function() {

        // perform reset actions here
        $(this).fadeIn()
    });
}

ただし、ユーザーはそれがフェードアウトいながら、彼らはすべての物理的デフォルトに戻って変更見ているように、div要素をフェードアウトされるように、フィールドは、リセットを取得し、何が起こるかです。そして、それはすぐにそれがフェードアウト完了したとして戻ってフェードイン。閉じるが、私は、ユーザーがリセットを取得してフィールドを表示したくありません。 （ブラウザはスクリプトがゆっくりと走っていたと述べたと、私はそれを停止したい場合は私に尋ねた）フェードアウトフィールドをリセットするために完了するまでは待つだろうので、私は次のことを試してみましたが、私は無限ループか何かを得ます：

function Reset() {

    $formDiv.fadeOut(function() {

        while (!$(this).is(':animated')) {
            // perform reset actions here
        }

        $(this).fadeIn()
    });
}
だから私は本当にわからここからどこへ行くじゃありません。任意の助けいただければ幸いです。おかげます。

役に立ちましたか？

解決

私は最近、間違って動作しているようだfadeOutと同じ問題を抱えていた、と私はそれのための解決策を見つけました 

$(this).animate({opacity:'0'},function(){

   //here changes to this element

   $(this).animate({opacity:'1'});
})

（要素が見えないながら変更が行われた）それはフェードイン/フェードアウトと同じに見えますが、期待されているとして、それが動作します。

私はあなたのいくつかは、それが役立つことを願っています。

他のヒント

使用

jQuery.stop().fadeOut()
フェードアウトアニメーションをキューイング防止します。

.stop() can be used to prevent queueing any jQuery Animation

http://api.jquery.com/stop/する

アニメーションが完了するまで、

コールバックは、実際に発射するべきではありません。それは、必要なパラメータとして（必ずしも正確ではない）のドキュメントを表示し、コールバックを指定した場合、それだけかもしれない - - あなたはフェードアウトの速度を設定しようとした持っているすなわち、それは速度としての機能を評価することができますあなたが明示的に提供しない場合ます。

$formDiv.fadeOut('fast', function() {
    // perform reset
    $(this).fadeIn();
});

編集：コードを見た後、あなたが最初の引数としての機能を提供する場合、それはそれを評価して戻り値を使用すること（少なくとも、1.3.2に）表示されますスピード。あなたが速さを指定した場合、あなたが期待するように、そしてあなたのコールバック関数は、それが動作するはずです。要素がフェードアウトする必要があり、コールバックは、コードの火災やあなたのリセットやフェードが実行されますされます。

.delayする

に見ます

もっと詳しく：設定した時間の量アニメーション）（フェードアウトのために取り、フェードアウトアニメーション時間よりも長いフェードイン（）アニメーションの遅延を使用します。この例では、リセットアクションはフェードアウトアニメーション中に起こるのだろうと、おそらく600ミリ秒以上の時間がかかるではない。

$formDiv.fadeOut(600,function() {

    // perform reset actions here
    $(this).delay(650).fadeIn()
});

編集：おっと、少し問題を誤解しました。あなたは、リセットフォームロジックは、フェードイン（）の呼び出しではなく、フェードアウトの引き金になりたいです。しかし、私はそれがアニメーションイベントを同期させるために、まだ良いことだと思います。以下のようなものを試してみてください。

$formDiv.fadeOut(600,function() {
    $(this).delay(650).fadeIn(function() {
        // perform reset actions here
    });
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top