更改jquery的show()/hide()动画？

Question

默认情况下，如果您指定了速度，jQuery会添加一个奇怪的动画，它从左上角扩展。我希望它只是向下滑动。有没有不导入其他内容（如jQuery UI）就能实现这一点的方法？

我想要的效果类似于：

$("test").show('slow', {animation:'slide'})

如果没有其他方法，那么最轻量级的解决方案是什么？

谢谢

- marcgg

Answer 1

jQuery 1.3+提供了slideDown、slideUp和slideToggle函数，它们非常好用......

https://api.jquery.com/category/effects/

可以像这样使用slideDown：

$("test").slideDown("slow");

如果你想要组合效果并进行更深入的操作，我建议使用animate函数。它可以让你指定多个CSS属性来形状缓动或变形。这是相当高级的技术。

- Steve Wortham

---

+1 最快的枪给你！我剪切和粘贴链接太慢了...你比我快了4分钟...该睡觉了！ - beggs

@marcgg - 不用谢。@beggs - 别难过，我通常也比较慢。;) - Steve Wortham

.slideToggle() - Leo

Answer 2

使用 slidedown():

$("test").slideDown("slow");

- beggs

Answer 3

您也可以使用fadeIn/FadeOut组合效果。

$('.test').bind('click', function(){
    $('.div1').fadeIn(500); 
    $('.div2').fadeOut(500);
    $('.div3').fadeOut(500);
    return false;
});

- Matthew

Answer 4

$(".test").on("click", (e) => { $(e.target.slideToggle("slow"); });

- Thanh Tuan

---

虽然这段代码可能回答了问题，但我建议你还是提供一下代码的解释以及它是如何解决问题的。带有解释的答案通常更有帮助和质量更高，并且更有可能获得赞同。 - Mark Rotteveel

好答案 :) 但是很难理解解决方案是什么。我建议：1）更好地格式化代码（使用三个反引号进行多行代码格式化：https://meta.stackoverflow.com/a/251362/3705191（还可以参考图片：https://i.stack.imgur.com/yvfn9.png）），2）对解决方案进行简短的解释（说明你正在使用slideToggle()以及它的作用（slideToggle在显示/隐藏之间切换，并带有动画效果，不同于只能向下滑动的slideDown）），3）可能提供与答案相关的文档链接（比如链接到slideToggle：https://api.jquery.com/slideToggle/）。 - Prid