Javascript jQuery slideUp 显示元素而不是隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5242780/
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 slideUp to show the element and not hide
提问by Umair Jabbar
jQuery's slideUp effect hides the element by sliding it up, while slideDown shows the element. I want to show my div using slideUp. can anyone guide me ? thanks
jQuery的slideUp效果通过向上滑动隐藏元素，而slideDown显示元素。我想使用 slideUp 显示我的 div。有人可以指导我吗？谢谢
回答by Jason
$("div").click(function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
回答by redbmk
It's a little more complex than just saying slideUpShow()or something, but you can still do it. This is a pretty simple example, so you might find some edge-cases that need adressing.
这比只是说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: ""
});
});
});
Here's a fiddle showing the slideUp/slideDownmethods, the same effects using animate, and a modified version using animatethat goes in reverse: http://jsfiddle.net/sd7zsyhe/1/
这是一个显示slideUp/slideDown方法的小提琴，使用相同的效果animate，使用animate相反的修改版本：http: //jsfiddle.net/sd7zsyhe/1/
Since animateis a built-in jQuery function, you don't need to include jQuery UI.
由于animate是内置的 jQuery 函数，因此您不需要包含 jQuery UI。
回答by jpillora
To get the opposite of slideUp and slideDown. Add these two functions to jQuery.
与slideUp和slideDown相反。将这两个函数添加到 jQuery。
$.fn.riseUp = function() { $(this).show("slide", { direction: "down" }, 1000); }
$.fn.riseDown = function() { $(this).hide("slide", { direction: "down" }, 1000); }
回答by carlxia
I found a tricky way...
you can set div with css style bottom:0px,
add call $("#div).slideDown();
will show with the slideUp-to-show effect you want.
我发现了一个棘手的方法...
您可以使用css样式bottom：0px设置div，添加调用$("#div).slideDown();
将显示您想要的slideUp-to-show效果。
回答by lilsizzo
This toggle effect is only for up and down. Jquery UI is for every other direction
此切换效果仅适用于上下。Jquery UI 适用于所有其他方向
回答by Daniel
For those who don′t use the Jquery UI but want to add the function to Jquery Library:
对于那些不使用 Jquery UI 但想将功能添加到 Jquery 库的人：
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;
}
Credits: @redbmk answer
积分：@redbmk 答案
回答by F8_
Despite the name, slideDown can actually slide your element both ways. Use absolute position if it is required to animate inside the parent element:
尽管名称如此，slideDown 实际上可以双向滑动您的元素。如果需要在父元素内设置动画，请使用绝对位置：
#slideup {
position:fixed;
bottom:0;
background:#0243c9;
color:#fafefa;
width:100%;
display:none;
padding: 20px;
}
#littleslideup {
position:absolute;
bottom:0;
background:#000;
color:#fff;
display:none;
padding:10px;
z-index:100;
}
#slidedown {
position:fixed;
top:0;
background:#c94333;
color:#fafefa;
width:100%;
display:none;
padding: 20px;
}
button {
display:inline-block;
font-size:16px;
padding:10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative">This amounts to 70% of the total timber stand area of the region (not including the dwarf pine and shrubby alder) and is more than the total area of all other stone birch forests growing in the Magadan, Khabarovsk, Primorye and Sakhalin regions and other areas of its distribution.
<div id="littleslideup">Absolute-positioned element</div>
</div>
<span style="color:red">Click >> </span>
<button onclick="jQuery('#slideup').slideDown(1500);" >"Slideup"</button>
<button onclick="jQuery('#slidedown').slideDown(1500);" >"Slidedown"</button>
<button onclick="jQuery('#littleslideup').slideDown(1500);">"Slideup" inside element</button>
<div>Finally, closing the subject of volcanic activity, it must be said that the stone birch stands by its functional reaction quite adequately in order to re ect the character and intensity of the physical, chemical and thermic processes, stipulated by volcanism as well as the in uence upon biota and ecosystems.</div>
<div id="slideup">Could be a bottom cookie warning bar</div>
<div id="slidedown">Could be a top cookie warning bar</div>回答by youssman
I've got some downvotes so I checked my answer and indeed I didn't answered correctly the OP question, sorry. So I'm gonna try to fix that.
我有一些反对票，所以我检查了我的答案，确实我没有正确回答 OP 问题，抱歉。所以我要尝试解决这个问题。
First, the slideUp()method in JQuery is intended to hide the element rather than reveal it. It is basically the opposite of slideDown()which shows your element by sliding it down.
首先，slideUp()JQuery 中的方法旨在隐藏元素而不是显示它。它基本上与slideDown()通过向下滑动显示您的元素相反。
By knowing that I think we agree that there is no magic function right there to do a slide up effect to show an element (in JQuery).
通过知道我认为我们同意那里没有魔术功能来执行向上滑动效果来显示元素（在 JQuery 中）。
So we need to do a little bit of work to get what we need: slid up reveal effect. I found out some solutions and here is one I think simple to implement:
所以我们需要做一些工作来获得我们需要的东西：向上滑动显示效果。我找到了一些解决方案，这是一个我认为很容易实现的解决方案：
https://coderwall.com/p/9dsvia/jquery-slideup-to-reveal
https://coderwall.com/p/9dsvia/jquery-slideup-to-reveal
The solution above works with the hover event, for the click event try this modified code:
上面的解决方案适用于悬停事件，对于单击事件，请尝试以下修改后的代码：
http://jsfiddle.net/D7uT9/250/
http://jsfiddle.net/D7uT9/250/
The answer given by @redbmkis also a working solution.
Sorry for my misunderstanding the first time.
对不起，我第一次的误解。
OLD ANSWER
旧答案
It's an old post, but if someone is looking for a solution here is my recommandation.
这是一个旧帖子，但如果有人正在寻找解决方案，这是我的建议。
We can, now, use slideToggle()to achieve this effect (without the need of jQuery UI).
现在，我们可以使用slideToggle()来实现这种效果（无需 jQuery UI）。
$(".btn").click(function () {
$("div").slideToggle();
});
Documentation: http://api.jquery.com/slidetoggle/
