jQuery:先淡出然后再滑动 [英] jQuery: FadeOut then SlideUp

问题描述

如果一个项目被删除，那么我想淡出它并向上滑动其他元素以填充空白处.现在，当我使用fadeOut()时，该项目的末尾没有高度，导致其他项目跳高(而不是很好地向上滑动).

If an item is being deleted then I would like to fade it out and slide the other elements up to fill the empty space. Now, when I use fadeOut() the item doesn't have a height at the end which results in the other items jumping up (instead of sliding up nicely).

我如何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上对其进行了测试，并且确实可以正常工作.

I tested it on JQuery 1.3.2, and it does work.

这是我从中调用的代码. #slide-then-fade是按钮元素的ID，article-text是div标签上的类:

This is the code I called it from. #slide-then-fade is the ID of a button element, article-text is a class on a div tag:

$(document).ready(function() {
  $('#slide-then-fade').click(function() {
    $('.article-text').fadeThenSlideToggle();
  });
});

修改为使用内置的slideUp.

Edit 2: Modified to use the built-in slideUp.

重写为切换开关，并使用fadeTo

Edit 3: Rewritten as a toggle, and using fadeTo

这篇关于jQuery:先淡出然后再滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！