web-dev-qa-db-ja.com

「可視性：非表示」をアニメーション化する方法は？

ここに私の問題があります...私を助けてくれませんか？

$(".button").hover(function(){
  $('.class').css({opacity: 1.0, visibility: "hidden"}).animate({opacity: 0}, 1200);
},function(){
  $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200);
});

表示されているときにのみアニメーション化します。 :-(

jqueryhtmlcssjquery-animatevisibility
9
Ondřej Moldan

この方法を試してください：

$(".button").hover(function(){
  $('.class').css("opacity", "1.0").animate({opacity: 0}, 1200, function(){
    $('.class').css("visibility", "hidden");
});
},function(){
  $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200);
});

ただし、これはfadeInおよびfadeOutに最適なオプションではありません。代わりに、jQueryが提供する名前のメソッドを使用するか、可能であればCSSトランジションを使用することをお勧めします。

4
lmgonzalves

CSSのvisibilityプロパティは、オンまたはオフのブール値です。

キーフレーム、トランジション、jqueryのいずれを使用する場合でも、アニメーションを機能させるには、プロパティ値セットの開始点と終了点を一連のステップに分割する必要があります。ステップ数が多いほど、アニメーションがスムーズになります。 。

このような単純な効果の場合、 transition が最適です、 ここでフィドルを参照してください 。移行をトリガーするクラスを追加/削除するためだけにJavaScriptを使用する

.hidden {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.show-me {
    opacity: 1;
}

遷移するプロパティを定義するtransitionプロパティを設定し、次に長さ、使用するイーズ関数（アニメーションが効果を発揮する速度の変更を記述）を設定します。また、2つの不透明度の値でわかるように、アニメーションプロパティの開始点と終了点を定義する必要があります。

記録のために-キーフレームは、効果がより複雑な場合に適しています。たとえば、あるプロパティを途中で完全にアニメーション化してから、別のプロパティをフルタイムでアニメーション化する場合や、振動の場合などです。 JQuery animateは、アニメーションの結論に基づいて行動する簡単な方法を提供しますが、これも必要になる場合があります。

1
Toni Leigh
$(".button").hover(function(){
    $('.class').css({opacity: 1.0, visibility: "visible"}).animate( //start off from opacity 1 and visibile
        {opacity: 0}, //then animate opacity to 0
        1200, 
        function(){ //this will be run after the animation is completed
            $(this).css({
                visiblity:"hidden" //so it will be hidden only after the animation has completed
            });
        }
    );
},function(){
  $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200);
});
1
Okku

fadeIn / fadeOut を使用します

$(".button").hover(function(){
  $('.class').fadeOut(1200);
},function(){
  $('.class').fadeIn(1200);
});

あなたはあなたの目標を達成するはずのdurationを渡すことができます

0
AmmarCSE

これは、アニメーション化する前に削除されるためです。最初にフェードアウトをアニメーション化し、アニメーションが完了した後にvisibility: hiddenを適用する必要があります。

これを行うには、いくつかの方法があります。ブラウザがイベントanimationendを発生させるか（これはさまざまなブラウザの前提となります。詳細については、こちらを参照してください）、jQueryアニメーションよりも優れたアニメーションライブラリ（Greenなど）を使用できます。 Sock TweenLite -- http://greensock.com/tweenlite ）アニメーションを処理するため、アニメーションの最後でコードを実行するのは簡単です。

0
Jeff Clarke