jQuery:FadeOut然后是SlideUp

Question

如果正在删除某个项目,那么我想将其淡出并将其他元素向上滑动以填充空白区域.现在,当我使用fadeOut()该项目时,最后没有高度导致其他项目跳起来(而不是很好地向上滑动).

我怎么能slideUp()和元素紧随其后fadeOut()？

Answer 1

听起来好像使用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
             });
         });

     });

});

在这里工作演示.

通过在前一个命令的回调函数中执行每个命令,该命令将不会运行,直到前一个命令完成; 当从DOM中删除元素而不等待slideUp完成时,会发生"跳转".

Answer 2

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