web-dev-qa-db-ja.com

fadeOut（）とslideUp（）を同時に？

jQuery：FadeOut then SlideUp が見つかりましたが、それは良いことですが、それは違います。

fadeOut()とslideUp()を同時に実行するにはどうすればよいですか？同じ遅延で2つのsetTimeout()呼び出しを試みましたが、ページがロードされるとすぐにslideUp()が発生しました。

誰もこれをしましたか？

javascriptjqueryfade
59
Matthew

次のようなことができます。これは完全なトグルバージョンです。

$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');

厳密にフェードアウトの場合：

$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');
104
Nick Craver

高さを直接アニメーション化すると、一部のWebページでぎくしゃくした動きになります。ただし、CSSトランジションとjQueryのslideUp()を組み合わせると、スムーズに消える行為になります。

_const slideFade = (elem) => {
   const fade = { opacity: 0, transition: 'opacity 0.5s' };
   elem.css(fade).slideUp();
   }

slideFade($('#mySelector'));
_

コードをいじる：
https://jsfiddle.net/00Lodcqf/435

bye

状況によっては、100ミリ秒の非常に速いポーズでフェードを増やすと、わずかに滑らかなエクスペリエンスが作成されます。

_   elem.css(fade).delay(100).slideUp();
_

これはdna.jsプロジェクトで使用したソリューションで、追加のサポートを確認するためにdna.ui.slideFade()関数のコード（ github.com/dnajs/dna.js ）を表示できます。トグルとコールバック用。

21
Dem Pilafian

「Nick Craver」による受け入れられた答えは間違いなく進むべき道です。私が追加する唯一のことは、彼の答えが実際にそれを「隠す」わけではないということです。つまり、DOMはまだそれを表示可能な要素として見ているということです。

'slid'要素にマージンまたはパディングがある場合、これは問題になる可能性があります...それらは引き続き表示されます。そこで、アニメーションが完了した後に実際に非表示にするために、animate（）関数にコールバックを追加しました。

$("#mySelector").animate({ 
   height: 0, 
   opacity: 0,
   margin: 0,
   padding: 0
}, 'slow', function(){
   $(this).hide();
});
11
CodeKoalas

slideUpメソッドとfadeOutメソッド自体を使用してこれを行うことができます。

$('#mydiv').slideUp(300, function(){
    console.log('Done!');
}).fadeOut({
    duration: 300,
    queue: false
});
3
CupOfTea696

@CodeKoalasに基づいて、さらに改良を加えます。垂直方向のマージンとパディングは考慮されますが、水平方向は考慮されません。

$('.selector').animate({
    opacity: 0,
    height: 0,
    marginTop: 0,
    marginBottom: 0,
    paddingTop: 0,
    paddingBottom: 0
}, 'slow', function() {
    $(this).hide();
});
2
nathancahill

同様の問題があり、このように修正しました。

$('#mydiv').animate({
            height: 0,
        }, {
            duration: 1000,
            complete: function(){$('#mydiv').css('display', 'none');}
        });
$('#mydiv').animate({
            opacity: 0,
        }, {
            duration: 1000,
            queue: false
        });

queueプロパティは、アニメーションをキューに入れるか、すぐに再生するかを指示します

2
Rob