28

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

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

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

jQueryを使用してこれをどのようにアニメーション化できますか?

4

8 に答える 8

44

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

$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();
于 2010-01-14T23:07:46.317 に答える
11

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

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

于 2008-09-03T18:20:21.080 に答える
8

@John Sheehan のアプローチが機能している間、IE7 でjQuery fadeIn/fadeOut ClearType グリッチに遭遇します。個人的には、@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
});
于 2008-09-03T21:57:04.973 に答える
6

純粋なjQueryアプローチの場合、次のことができます

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

それはハックですが、それは仕事をします

于 2008-09-03T18:31:18.433 に答える
4 
var $msg = $('#msg-container-id');
$msg.fadeIn(function(){
  setTimeout(function(){
    $msg.fadeOut(function(){
      $msg.remove();
    });
  },5000);
});
于 2008-09-03T18:22:35.893 に答える
2

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

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

于 2008-09-17T07:02:14.287 に答える
1

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

remove()ただし、次のように機能します（メソッドを省略します）。

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

ページに非表示のDIVがあるかどうかは気になりません（とにかく少数であってはなりません）。

于 2010-06-14T19:06:21.573 に答える
0

1.6.2 の更新

ネイサン・ロングの答えは、遅延またはに従わずに要素をポップオフさせfadeOutます。

これは機能します：

$('#foo').delay(2000).fadeOut(2000);
于 2011-10-12T04:32:39.667 に答える