jQuery slideUp来显示元素，而不是隐藏

jQuery的slideUp效果通过向上滑动来隐藏该元素，而slideDown则显示该元素。 我想使用slideUp显示我的div。 谁能指导我？ 谢谢

Answer 1

$("div").click(function () { $(this).hide("slide", { direction: "down" }, 1000); }); 

http://docs.jquery.com/UI/Effects/Slide

Answer 2

这比稍微说slideUpShow()什么的更复杂一点，但是你仍然可以做到。 这是一个非常简单的例子，所以你可能会发现一些需要处理的边缘情况。

 $("#show-animate-up").on("click", function () { var div = $("div:not(:visible)"); var height = div.css({ display: "block" }).height(); div.css({ overflow: "hidden", marginTop: height, height: 0 }).animate({ marginTop: 0, height: height }, 500, function () { $(this).css({ display: "", overflow: "", height: "", marginTop: "" }); }); }); 

下面是一个小提琴，展示了slideUp / slideDown方法，使用animate效果的相同效果，以及使用animate的修改版本，这些都是相反的： http : //jsfiddle.net/sd7zsyhe/1/

由于animate是一个内置的jQuery函数，所以你不需要包含jQuery UI。

Answer 3

我发现了一个棘手的方法…
你可以用css风格底部设置div：0px，添加调用
$("#div).slideDown();
将显示您想要的幻灯片显示效果。

Answer 4

获得与slideUp和slideDown相反的内容。 将这两个函数添加到jQuery中。

 $.fn.riseUp = function() { $(this).show("slide", { direction: "down" }, 1000); } $.fn.riseDown = function() { $(this).hide("slide", { direction: "down" }, 1000); } 

Answer 5

jquery切换

这种切换效果仅用于上下。 JQuery UI是每隔一个方向

Answer 6

对于那些不使用Jquery UI但想将函数添加到Jquery Library的人：

 jQuery.fn.slideUpShow = function (time,callback) { if (!time) time = 200; var o = $(this[0]) // It's your element if (o.is(':hidden')) { var height = o.css({ display: "block" }).height(); o.css({ overflow: "hidden", marginTop: height, height: 0 }).animate({ marginTop: 0, height: height }, time, function () { $(this).css({ display: "", overflow: "", height: "", marginTop: "" }); if (callback) callback(); }); } return this; // This is needed so others can keep chaining off of this }; jQuery.fn.slideDownHide = function (time,callback) { if (!time) time = 200; var o = $(this[0]) // It's your element if (o.is(':visible')) { var height = o.height(); o.css({ overflow: "hidden", marginTop: 0, height: height }).animate({ marginTop: height, height: 0 }, time, function () { $(this).css({ display: "none", overflow: "", height: "", marginTop: "" }); if (callback) callback(); }); } return this; } 

积分：@redbmk回答

Answer 7

我有一些downvotes所以我检查了我的答案，而且我没有正确回答OP的问题，对不起。 所以我会尽力解决这个问题。

首先，JQuery中的slideUp()方法旨在隐藏元素而不是显示它。 它基本上与slideDown()相反，它通过滑动显示元素。

通过知道我认为我们同意没有魔术function在那里做幻灯片的效果来显示一个元素（在JQuery中）。

所以我们需要做一些工作来得到我们需要的东西：滑动显示效果。 我发现了一些解决scheme，我认为这是一个简单的实现方法：

https://coderwall.com/p/9dsvia/jquery-slideup-to-reveal

上面的解决scheme使用hover事件，单击事件尝试此修改后的代码：

http://jsfiddle.net/D7uT9/250/

@redbmk给出的答案也是一个可行的解决scheme。

对不起，我第一次误会了。

---

老解答

这是一个旧的post，但如果有人正在寻找解决scheme，这是我的build议。

我们现在可以使用slideToggle()来实现这个效果（不需要jQuery UI）。

 $(".btn").click(function () { $("div").slideToggle(); }); 

文档： http : //api.jquery.com/slidetoggle/