jQuery：FadeOut 然后 SlideUp
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/734554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: FadeOut then SlideUp
提问by bart
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).
如果一个项目被删除，那么我想淡出它并将其他元素向上滑动以填充空白空间。现在，当我使用fadeOut()该项目时，它的末端没有高度，这会导致其他项目跳起来（而不是很好地向上滑动）。
How can I slideUp()and element right after fadeOut()?
我怎样才能slideUp()和元素紧随其后fadeOut()？
回答by Russ Cam
Sounds like it would be better to use the jQuery fadeTocommand
听起来像使用 jQuery淡入淡出命令会更好
$(function() {
$("#myButton").click(function() {
$("#myDiv").fadeTo("slow", 0.00, function(){ //fade
$(this).slideUp("slow", function() { //slide up
$(this).remove(); //then remove from the DOM
});
});
});
});
By performing each command in the callback function of the preceding command, the command will not run until the previous one completes; a "jump" occurs when the element is removed from the DOM without waiting for the slideUp to complete.
通过执行上一条命令的回调函数中的每一条命令，直到上一条命令完成后，该命令才会运行；当元素从 DOM 中移除而不等待 slideUp 完成时，就会发生“跳转”。
回答by Powerlord
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);
}
};
I tested it on JQuery 1.3.2, and it does work.
我在 JQuery 1.3.2 上对其进行了测试，它确实有效。
Edit: 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:
编辑：这是我调用它的代码。#slide-then-fade 是按钮元素的 ID，article-text 是 div 标签上的一个类：
$(document).ready(function() {
$('#slide-then-fade').click(function() {
$('.article-text').fadeThenSlideToggle();
});
});
Edit 2: Modified to use the built-in slideUp.
编辑2：修改为使用内置的slideUp。
Edit 3: Rewritten as a toggle, and using fadeTo
编辑 3：重写为切换，并使用淡入淡出
回答by Kezzer
回答by albert
$("#id").fadeIn(500, function () {
$("#id2").slideUp(500).delay(800).fadeOut(400);
});
回答by Nithee
回答by Ian Oxley
The fadeOut function takes a second optional argument of a callback function, so you should be able to do something like this:
FadeOut 函数采用回调函数的第二个可选参数，因此您应该能够执行以下操作：
$('elementAbove').fadeOut(500, function() {
$('elementBelow').slideUp();
});
EDIT: forgot to add the speed of the fadeOut as the first parameter
编辑：忘记添加淡出的速度作为第一个参数
