web-dev-qa-db-ja.com

jQuery：FadeOut、SlideUp

アイテムが削除されている場合は、フェードアウトし、他の要素を上にスライドさせて、空のスペースを埋めます。さて、fadeOut()を使用すると、アイテムの末尾に高さがなく、他のアイテムが（上にスライドするのではなく）ジャンプします。

slideUp()の直後に要素をfadeOut()と要素を追加するにはどうすればよいですか？

jqueryfadeoutslideup
28
bart
jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) {
  if (this.is(":hidden")) {
    return this.slideDown(speed, easing).fadeTo(speed, 1, easing, callback);
  } else {
    return this.fadeTo(speed, 0, easing).slideUp(speed, easing, callback);
  }
};

JQuery 1.3.2でテストしましたが、動作します。

編集：これは私が呼び出したコードです。 ＃slide-then-fadeはボタン要素のID、article-textはdivタグのクラスです：

$(document).ready(function() {
  $('#slide-then-fade').click(function() {
    $('.article-text').fadeThenSlideToggle();
  });
});

編集2：組み込みのSlideUpを使用するように変更されました。

編集3：トグルとして書き直され、fadeToを使用する

41
Powerlord

JQuery fadeTo コマンドを使用する方が良いように思えます

 $(function() {

     $("#myButton").click(function() {
         $("#myDiv").fadeTo("slow", 0.00, function(){ //fade
             $(this).slideUp("slow", function() { //slide up
                 $(this).remove(); //then remove from the DOM
             });
         });

     });

});

ここで作業デモ 。

前のコマンドのコールバック関数で各コマンドを実行することにより、前のコマンドが完了するまでコマンドは実行されません。 「ジャンプ」は、slideUpの完了を待たずに要素がDOMから削除されると発生します。

54
Russ Cam
$("#id").fadeIn(500, function () {

    $("#id2").slideUp(500).delay(800).fadeOut(400);

});
1
albert

連鎖できませんか？

$('myelement').fadeOut().slideUp();

[〜＃〜]編集[〜＃〜]：

たぶん this が代わりに役立ちますか？

1
Kezzer

$('.row').animate({ height: 'toggle', opacity: 'toggle' }, 'slow').slideUp();をお試しください

こちらのデモ

1
Nithee