jQuery:先淡出然后再滑动

本文介绍了jQuery:先淡出然后再滑动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如果一个项目被删除，那么我想淡出它并向上滑动其他元素以填充空白处.现在，当我使用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