javascript - 同時にfadeOut（）とslideUp（）？

Question

私はjQueryを見つけました：FadeOutそしてSlideUpそしてそれは良いです、しかしそれは1つではありません。

どうすればfadeOut()同時にslideUp()できますか？setTimeout()同じ遅延で2つの別々の呼び出しを試しslideUp()ましたが、ページが読み込まれるとすぐに発生しました。

誰かがこれをしましたか？

score 108 · Accepted Answer

あなたはこのようなことをすることができます、これは完全なトグルバージョンです：

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

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

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

score 22 · Accepted Answer

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

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

slideFade($('#mySelector'));

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

状況によっては、100ミリ秒の非常に速い一時停止により、より多くのフェードが可能になり、わずかにスムーズなエクスペリエンスが作成されます。

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

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

score 14 · Accepted Answer

「ニック・クレイバー」によって受け入れられた答えは間違いなく行く方法です。私が追加する唯一のことは、彼の答えは実際にはそれを「非表示」にしないということです。つまり、DOMはそれを表示するための実行可能な要素と見なします。

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

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

私も同様の問題を抱えていて、このように修正しました。

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

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

score 2 · Accepted Answer

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

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

javascript - 同時にfadeOut（）とslideUp（）？

6 に答える 6

Related

Reference