jQueryを使用して要素をフェードアウトする前に一時停止するにはどうすればよいですか?

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

  •  09-06-2019
  •  | 
  •  

質問

自分のページに成功メッセージを表示したいと考えています。

jQueryを使用しています fadeOut 要素をフェードしてから削除するメソッド。継続時間を長くして持続時間を長くすることもできますが、これは奇妙に見えます。

私が望んでいるのは、要素を 5 秒間表示し、すぐにフェードアウトして、最後に削除することです。

これを jQuery を使ってアニメーション化するにはどうすればよいでしょうか?

役に立ちましたか？

解決

新しい delay() jQuery 1.4 の関数でうまくいくはずです。

$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();

他のヒント

使用 setTimeout(function(){$elem.hide();}, 5000);

どこ $elem は非表示にしたい要素であり、 5000 ミリ秒単位の遅延です。実際には、呼び出し内で任意の関数を使用できます。 setTimeout(), 、このコードでは、簡単にするために小さな匿名関数を定義しているだけです。

@John Sheehan のアプローチは機能しますが、次のような問題に遭遇します。 jQuery のフェードイン/フェードアウト ClearType の不具合 IE7では。個人的には、@John Millikin のものを選びます。 setTimeout() ただし、純粋な jQuery アプローチを設定している場合は、マージンなどの不透明でないプロパティでアニメーションをトリガーすることをお勧めします。

var left = parseInt($('#element').css('marginLeft'));
$('#element')
    .animate({ marginLeft: left ? left : 0 }, 5000)
    .fadeOut('fast');

マージンが固定値であることがわかっていれば、もう少しすっきりすることができます。

$('#element')
    .animate({ marginLeft: 0 }, 5000)
    .fadeOut('fast');

編集:のように見えます jQuery FxQueues プラグイン 必要なことだけを実行します:

$('#element').fadeOut({
    speed: 'fast',
    preDelay: 5000
});

純粋な jQuery アプローチの場合、次のようにできます。

$("#element").animate({opacity: 1.0}, 5000).fadeOut();

これはハックですが、機能します

var $msg = $('#msg-container-id');
$msg.fadeIn(function(){
  setTimeout(function(){
    $msg.fadeOut(function(){
      $msg.remove();
    });
  },5000);
});

dansays のコメントに続いて、次のコードは完全にうまく機能するようです。

$('#thing') .animate({dummy:1}, 2000) .animate({ etc ... });

1.6.2のアップデート

ネイサン・ロングの答えは、遅延または遅延に従わずに要素が飛び出す原因になります。 fadeOut.

これは機能します:

$('#foo').delay(2000).fadeOut(2000);

dansays の答えは私には当てはまりません。何らかの理由で、 remove() はすぐに実行され、アニメーションが発生する前に div が消えます。

ただし、次の場合は機能します（省略すると、 remove() 方法）：

$('#foo').fadeIn(500).delay(5000).fadeOut(500);

ページ上に非表示の DIV があっても気にしません (とにかく、いくつか以上あるべきではありません)。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top