.slideToggle() 可以正常工作，但 .slideUp() 和 slideDown() 无法正常工作的原因可能是什么？

Question

背景：

我遇到了一个问题，觉得有些出乎意料。我有一个小的jQuery模块，其中我一直在使用.slideToggle()来显示/隐藏一个元素，并且一直工作正常。今天我正在为我的插件实现两个公共方法，以便使用滑动效果来显示或隐藏该元素。

虽然听起来很简单，但我认为我只需使用.slideUp()和.slideDown()来完成同样的事情。当我意识到在该元素上调用这些方法时什么都没有发生时，我真的很惊讶。

顺便说一句，调用.show()和.hide()也能正常工作，但没有期望的动画效果。

我一直以为.slideToggle()在“幕后”实现了与.slideUp()和.slideDown()相同的功能，但显然并不是这样。

我的问题：

.slideToggle()与.slideUp()和.slideDown()有何不同？在使用它们时需要考虑哪些因素？

更新示例：

我已经将其分解为重要的组件，以便在此示例中重现此错误。您可以注释掉.slideToggle("slow")和.slideUp("slow")来进行测试。使用 slideToggle 正常工作，使用 slideUp 则不行。

- Christofer Eliasson

---

展示出有问题的实际代码！ - epascarello

@epascarello 我会尝试在Fiddle中将其简化为基本要素，但它是一组相当大的CSS和JS的一部分。我认为.slideToggle()和.slideUp()之间可能存在一些明显的差异，由于实现差异，这可能可以解释这个问题。 - Christofer Eliasson

@Christofer，我会再次检查对slideUp()和slideDown()的调用。您确定在元素隐藏时没有调用slideUp()，在元素可见时没有调用slideDown()，而不是反过来吗？ - Frédéric Hamidi

@epascarello，我已经更新了这个问题，并提供了一个示例（fiddle），展示了这个问题。 - Christofer Eliasson

@FrédéricHamidi，你是绝对正确的，问题出在我混淆了这些方法。请查看被接受的答案。如果你将其作为答案返回，我将很高兴将其作为正确答案接受，因为你是第一个发布它的人。无论如何，非常感谢你的帮助！ - Christofer Eliasson

Answer 1

问题在于slideUp不是最好的方法名称。更好的名称应该是"slideHide"。如果你将其改为slideDown，它会按预期工作，因为它对应于显示。

来自http://api.jquery.com/slideUp/ 描述：使用滑动动画隐藏匹配的元素。

- Tetaxa

---

我现在感觉好蠢啊！我一直困在我的思维中，想要使用slideUp()，因为标题应该向上移动，结果错过了显而易见的解决方法。谢谢！ - Christofer Eliasson

如果这个问题还没有在jQuery的github仓库上发布，你应该将它作为一个建议添加进去。.slideHide()显然是一个更好的名称。 - Christofer Eliasson

@ChristoferEliasson 更合理的做法是将其重命名为 slideIn 和 slideOut，以匹配 fadeIn 和 fadeOut。 - styfle

Answer 2

实际上它的工作方式是相同的。我相信您已经颠倒了调用 slideDown 和 slideUp 的顺序。这里是一个更新的 fiddle。

代码：

var flip = true;
$(".dockedHeader").on("click", function () {
    if (flip) {
        $(".content").slideDown("slow");
        flip = !flip;
    } else {
        $(".content").slideUp("slow");
        flip = !flip;
    }
    //$(".content").slideToggle("slow");
});

最初您的内容是隐藏的，因此您应该调用sliderDown()而不是slideUp()来显示它，反之亦然。

- Konstantin Dinev

---

这真是有些尴尬，我太过于纠结于名称slideUp，因为它看起来像元素正在向上滑动。我选择接受Tetaxas的答案，因为他真正地表达了我的困惑，但非常感谢你们的帮助！ - Christofer Eliasson