30

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

之后我怎么能slideUp()和元素fadeOut()呢？

4

6 回答 6

54

听起来使用 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 完成时，会发生“跳转”。

于 2009-04-09T15:55:00.157 回答
41 
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

于 2009-04-09T15:31:29.637 回答
1

不能挂链吗？

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

编辑：

也许这会有所帮助？

于 2009-04-09T14:48:21.170 回答
1 
$("#id").fadeIn(500, function () {

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

});
于 2012-07-04T18:02:31.170 回答
1

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

演示在这里

于 2015-09-18T09:17:23.610 回答
-1

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

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

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

于 2009-04-09T15:02:47.140 回答