アイテムが削除されている場合は、フェードアウトし、他の要素を上にスライドさせて、空のスペースを埋めます。さて、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でテストしましたが、動作します。
編集:これは私が呼び出したコードです。 #slide-then-fadeはボタン要素のID、article-textは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();
をお試しください