jQueryの：フェードアウトその後、SlideUp

StackOverflow https://stackoverflow.com/questions/734554

  •  09-09-2019
  •  | 
  •  

質問

項目が削除されている場合は、

私はそれをフェードアウトして空きスペースを埋めるために他の要素をスライドアップしたいと思います。今、私が使用するときfadeOut()項目が（代わりにうまくアップスライドの）ジャンプアップ他の項目をもたらす端における高さを有していない。

どのように私は右slideUp()後fadeOut()と要素ができますか？

役に立ちましたか？

解決 

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でそれをテストし、それが作業を行います。

編集：これは私からそれを呼び出したコードです。 ＃スライド-その後、フェードボタン要素のIDで、記事テキストはdivタグのクラスです。

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

編集2：内蔵のslideUpを使用するように変更

。

編集3：トグルのように書き換え、及びfadeToを使用して

他のヒント

は、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から削除されたときに「ジャンプ」が発生します。

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

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

});

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

ここのデモ

フェードアウト機能は、コールバック関数の2番目のオプションの引数を取りますので、あなたはこのような何かを行うことができる必要があります：

$('elementAbove').fadeOut(500, function() {
    $('elementBelow').slideUp();
});

編集：最初のパラメータとしてフェードアウトの速度を追加するのを忘れ

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top