jquery - フェードアウトとスライドアップを同時に？

Question

うまく機能する次のスクリプトがあります。

$(that).parents(".portlet").fadeOut('slow', function() {
    $(that).parents(".portlet").remove();
});

要素をフェードアウトさせ、画面から完全に削除します。

フェードアウト中に上にスライドさせて少し効果を上げたい。どうすればいいですか？

はっきりさせておきますが、フェードアウトしてから上にスライドしたり、上にスライドしてからフェードアウトしたりしたくありません。 .

score 17 · Accepted Answer

$(that)
    .parents(".portlet")
    .animate({height: 0, opacity: 0}, 'slow', function() {
        $(this).remove();
    });

score 4 · Accepted Answer

どうですか：

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0,
    height: '0'
  }, 5000, function() {
    // Animation complete.
  });
});

opacque 0 と height 0 になります。

詳細はこちら: http://api.jquery.com/animate/

score 1 · Accepted Answer

jQuery.animate()を使用すると、一度に多くのプロパティを操作できます -デモを参照してください

score 1 · Accepted Answer

ジャンピング効果を避けるために、パディングとマージンを忘れないでください。jQuery チームはプロパティ 0 を使用しません。代わりに、値 'hide' と 'show' を使用しています。例えば

    $('#elementId').animate({
            opacity: 'hide',      // animate slideUp
            margin: 'hide',
            padding: 'hide',
            height: 'hide'        // animate fadeOut
        }, 'slow', 'linear', function() {
            $(this).remove(); 
        });

score 0 · Accepted Answer

jquery の .animate 関数を使用できます

アニメーションはいくつでも設定できます。

opacity をパラメーターとして渡し、slideUp もパラメーターとして渡します

api.jquery.com/animate/

score 0 · Accepted Answer

.animate()を使用できます。

$(that).parents(".portlet").animate({
    opacity: 0,
    height: 0
}, 'slow', 'linear', function() {
    $(that).parents(".portlet").remove();
});

jquery - フェードアウトとスライドアップを同時に？

6 に答える 6

Related

Reference