jQuery：淡出然后滑动

Question

如果要删除某个项目，那么我想将其淡出并向上滑动其他元素以填充空白空间。 现在，当我使用 fadeOut() 时，该项目末尾没有高度，这会导致其他项目向上跳跃（而不是很好地向上滑动）。

如何在 fadeOut() 之后使用 slideUp() 和元素？

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

Answer 3

你不能链它吗？

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

编辑：

也许这会有所帮助？

Answer 4

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

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

});

Answer 5

尝试 $('.row').animate({ height: 'toggle', opacity: 'toggle' }, 'slow').slideUp();

演示在这里

Answer 6

fadeOut 函数采用回调函数的第二个可选参数，因此您应该能够执行以下操作：

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

编辑：忘记添加 fadeOut 的速度作为第一个参数