web-dev-qa-db-ja.com

jQuery cssアニメーションによる可視性

いくつかのdivが下に配置されており、CSS可視性を使用してそれらをフェードインおよびフェードアウトしています。可視性を使用する理由は、divが場所を移動しないようにするためです。

私が使用しているフェードインの場合：

$('.drop1').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});

そして、私が使用しているフェードアウトの場合：

$('.drop1').css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1.0})}, 200);

FadeInは動作します、しかしfadeOutは動作しません。

今、あなたは問題が最後の '、2'であると思うかもしれませんが、200ms後にフェードアウト/可視性：非表示がmouseleaveイベントにあるので、それを遅延として使用する必要があります。

したがって、私の質問は次のとおりです。アニメーションで非表示の可視性をフェードアウトとして機能させるにはどうすればよいですか。

どうもありがとう

javascriptjquerycssanimationvisibility
51
jQuerybeast

$('.drop1').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);

67
Blazemonger

cSSをアニメートする代わりに、デフォルトのフェード機能を使用することができます。

$('.drop1').fadeIn(200);
$('.drop1').fadeOut(200);

編集

ただし、高さを失わずにフェードアウトする場合。 fadeTo（duration、opacity、[callback]）; を使用できます

$('.drop1').fadeTo(200, 0);

この例を確認してください： http://jsfiddle.net/ufLwy/1/

59
Sander

私は同様の問題を抱えていましたが、ここに私がやったことです。

$.fadeToHidden = function ( selector, duration, complete ) {
    $.when(
        $( selector ).fadeTo( duration, 0 )
    ).done( function(){
        $( selector ).css('visibility', 'hidden')
        complete();
    });
}

私がこれをした理由は

  1. fadeIn（）/ fadeOut（）はFが要素の高さを超える「ディスプレイ」を使用します
  2. fadeToは「可視性」に影響を与えないため、要素はopacity：で視覚的に非表示になりますが、ユーザーは非表示の要素を操作（つまりクリック）することができます
  3. animate（）は非同期であるため、CSSを最後にチェーンしても、アニメーションが完了したときに実行されることは保証されません。アニメーションが返すDeferredオブジェクト（$ .when（）/ $ .done（））を使用することによってのみ、cssがallアニメーションが完了しました。

編集または、それぞれのアニメーションが完了したら、個々の要素に「visibility：hidden」を適用できます。要素のグループに対してDOMに一度だけクエリを実行するため、これは要素の大きなグループを選択するために少し速くなる場合があります。

$.fadeToHidden = function ( selector, duration, complete ) {
    $.when(
        $( selector ).fadeTo( duration, 0 , function(){ 
            $(this).css('visibility', 'hidden');
        } )
    ).done( complete );
}
7
hypno7oad

私は同様の問題を抱えていましたが、この方法で解決しました：

フェードインするには：

$("#id").css({visibility:"visible", opacity: 0.0}).animate({opacity: 1.0},200);

フェードアウトするには：

$("#id").animate({opacity: 0.0}, 200, function(){
    $("#"+txtid).css("visibility","hidden");
});

ご覧のとおり、アニメーションが終了したらdiv "#id"を非表示にします。手遅れではないことを望みます

5
Miguel Higuera Romero

私はこれが古い投稿であることを知っていますが、私は同様の状況に出くわし、これが私がやったことです

$(".drop1").css("visibility", "visible").show().fadeOut(5000);
0
codingforpassion