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
             });
         });

     });

});

Working Demo here。

通过在前面命令的回调函数中执行每个命令，该命令将在前一个命令完成之前运行;当从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();

修改：

也许this会有所帮助？

Answer 4

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

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

});

Answer 5

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

demo Here

Answer 6

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

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

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

jQuery：FadeOut然后是SlideUp

6 个答案: