Jquery 为什么并行淡出（）会停止slideup（）的工作？

我把这个简单的演示放在一起，找出单击项目时

slideUp

不起作用的原因，并注意到如果我删除

fadeOut

，它会起作用

简单HTML：

<div class="WaffleMaker">
    <div class="Waffle">I am a waffle (toaster notification 1)</div>
    <div class="Waffle">I am a waffle (toaster notification 2)</div>
    <div class="Waffle">I am a waffle (toaster notification 3)</div>
</div>

测试代码：

$('.Waffle').click(function () {
    var $waffle = $(this);
    $waffle.fadeOut().slideUp("slow", function () {
        $waffle.remove();
    });
});

为什么

fadeOut

的存在会阻止

slideUp

工作

如果您将小提琴更改为此，则可以：

    $waffle.slideUp("slow", function () {

---

因为函数排队，所以可以使用

.animate

并将队列设置为false

$waffle.slideUp("slow", function () {
    $waffle.remove();
}).animate({opacity:0},{queue:false});

---

默认情况下，这些功能为a-sync，并在另一个功能完成时运行。组合动画时，我建议您使用

animate（）

为示例制作动画

例1

$('.Waffle').click(function () {
    var $waffle = $(this);
    $($waffle).animate({ height: 0, opacity: 0 }, 'slow');

});

当您不想使用动画时，可以关闭队列

小提琴：

禁用队列示例

例2

$('.Waffle').click(function () {
    var $waffle = $(this);
    $waffle.fadeOut({queue: false}).slideUp("slow", function () {
        $waffle.remove();
    });
});

小提琴：

---

是因为jquery在下一个操作之前完成了

fadeOut（）

，因为您所做的是排队操作，因为它们有不同的效果，所以我没有想到它们是排队的！不要！但是为了更完整地回答关于没有slideup动画的原因，应该将其称为DOC:

the.fadeOut（）方法为匹配元素的不透明度设置动画。不透明度达到0后，“显示样式”属性设置为“无”，因此该元素不再影响页面的布局。

@A.Wolff:谢谢您提供的信息。你现在已经完成了谜题，我的烤面包机华夫饼又开始烹饪了：）+1：根据你的第一个例子，我选择了并行动画值，作为更可读的选项，但我必须首先向安东给出答案，因为这两种解决方案都很好。非常感谢

$('.Waffle').click(function () {
    var $waffle = $(this);
    $waffle.fadeOut({queue: false}).slideUp("slow", function () {
        $waffle.remove();
    });
});