web-dev-qa-db-ja.com

ページのレイアウトを変更せずに要素をフェードインおよびフェードアウトする

fadeIn および fadeOut を使用する場合の通常の動作は、 the display property を使用することです。 。ただし、これによりページのレイアウトが変更されます。

fadeInとfadeOutがページのレイアウトを変更しないようにするにはどうすればよいですか？

jquerycsslayout
60
lars

また

.fadeIn()の代わりに.animate({opacity:1})
そして.fadeOut()の代わりに.animate({opacity:0})

72
Gabriele Petrioli

これをfadeOutで試すことができます：

$("something here").fadeOut("slow", function() {
    $(this).show().css({visibility: "hidden"});
});

...そしてfadeInの場合：

$("something here").hide().css({visibility: "visible"}).fadeIn("slow");
25
icktoofay

fadeTo を使用：

.fadeTo()メソッドは、一致した要素の不透明度をアニメーション化します。 .fadeIn() メソッドに似ていますが、このメソッドは要素を再表示し、常に100％の不透明度にフェードします。

期間はミリ秒単位で指定されます。値が大きいほどアニメーションは遅く、アニメーションは速くありません。文字列_'fast'_および_'slow'_を指定して、それぞれ_200_および_600_ミリ秒の継続時間を示すことができます。他の文字列が指定されている場合、デフォルトの期間である_400_ミリ秒が使用されます。他のエフェクトメソッドとは異なり、.fadeTo()ではdurationを明示的に指定する必要があります。

指定した場合、アニメーションが完了するとコールバックが発生します...

18
10gler

以下の10glerのおかげで、目に見えないボタンのクリックなどを防ぐために可視性を使用しています。

//fadeIn
$("#x")
    .css('visibility', 'visible')
    .fadeTo('fast', 1);

//fadeOut
$("#x")
    .fadeTo('fast', 0, function() {
        $(this).css('visibility', 'hidden');
    });
2
Torbjörn Nomell

上記の回答を組み合わせて使用​​すると、これは私にとってうまくいきました。アニメーション時間はお好みで変更できます。

fadeInへ：

        $('selector').animate({opacity:1, visibility:'visible'}, 200);

fadeOutへ：

        $('selector').animate({opacity:0, visibility:'hidden'}, 200);

visibilty:'hidden'およびopacity:0最初に、デフォルトのディスプレイが非表示の場合に最初のフェードインで突然ポップが発生するのを回避します。それ以外の場合は問題になりません。

        $('selector').css({opacity:0, visibility:'hidden'});
0
jor