jQuery的slideUp效果通过向上滑动来隐藏元素,而slideDown显示该元素。我想用slideUp显示我的div。任何人都可以引导我?感谢jQuery slideUp显示元素而不隐藏
回答
$("div").click(function() {
$(this).hide("slide", { direction: "down" }, 1000);
});
我发现了一个取巧的办法...
你可以设置DIV与CSS样式底部:0像素, 添加通话
$("#div).slideDown();
将与效果基本show到显示效果展示你要。
这个作品,但只有当#div也可以设置为position:absolute;当#div需要相对定位时,它不会。 – Strixy 2013-04-25 21:26:11
获得与slideUp和slideDown相反的结果。将这两个函数添加到jQuery中。
$.fn.riseUp = function() { $(this).show("slide", { direction: "down" }, 1000); }
$.fn.riseDown = function() { $(this).hide("slide", { direction: "down" }, 1000); }
为此,您需要使用jQueryUI库[链接](https://developers.google.com/speed/libraries/devguide#jquery) – Yokocapolo 2012-12-08 19:47:51
这与@jason之前给出的实际效果相同,只是稍微有些钝到命名空间。 – Strixy 2013-04-25 21:41:18
它本质上是相同的答案,尽管这是快捷方式,对某些人来说可能更易读。 – jpillora 2013-04-27 06:25:01
它比只说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: ""
});
});
});
这里的显示使用animate
的slideUp
/slideDown
方法,相同的效果小提琴,并使用animate
修改后的版本是去反向:http://jsfiddle.net/sd7zsyhe/1/
由于animate
是一个内置的jQuery的功能,您不需要包含jQuery UI。
+1这很好,你有一个很好的jsfiddle例子。我不知道为什么没有被选作正确答案 – krummens 2015-09-23 03:56:18
如果OP不想使用jQuery UI库,这应该是答案 – 2016-05-31 10:38:51
我有一些downvotes所以我检查了我的答案,实际上我没有正确回答OP问题,对不起。所以我会试着解决这个问题。
首先,JQuery中的slideUp()
方法旨在隐藏元素而不是透露它。它基本上与slideDown()
相反,它通过滑动显示您的元素。
通过知道我认为我们同意没有幻术功能在那里做一个幻灯片上的效果来显示一个元素(在JQuery中)。
所以我们需要做一些工作来获得我们需要的东西:滑动显示效果。我找到了一些解决方案,并在这里是一个我认为很容易实现:
https://coderwall.com/p/9dsvia/jquery-slideup-to-reveal
解决方案上面的悬停事件的作品,为Click事件试试这个修改后的代码:
http://jsfiddle.net/D7uT9/250/
由@redbmk给出的答案也是一个可行的解决方案。
对不起,我第一次误会。
OLD ANSWER
这是一个古老的职位,但如果有人想办法解决这是我的建议:。
现在,我们可以使用slideToggle()
来实现这种效果(不需要jQuery UI)。
$(".btn").click(function() {
$("div").slideToggle();
});
如果downvoting伴随着评论,这将是非常有用的。谢谢 – youssman 2017-11-21 18:16:47
对于那些谁鸵鸟政策使用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;
}
现金@redbmk回答
- 1. jQuery slideUp显示元素
- 2. jquery显示/隐藏元素
- 3. jQuery隐藏/显示元素
- 4. 显示隐藏的元素
- 5. 显示/隐藏DOM元素
- 6. 隐藏元素和显示元素
- 7. 阵营:隐藏/显示元素,而隐藏在类似的元素
- 8. 显示隐藏的元素
- 9. 显示和隐藏元素使用jQuery
- 10. JQuery的错误显示/隐藏元素
- 11. 隐藏后jQuery显示元素
- 12. jQuery隐藏并显示多个元素
- 13. jQuery Mobile显示隐藏的select元素
- 14. jQuery的隐藏和显示DOM元素
- 15. jQuery的 - 显示/隐藏元素
- 16. jquery显示和隐藏元素
- 17. jquery for循环显示隐藏元素
- 18. jQuery隐藏显示元素逻辑
- 19. jQuery显示/隐藏非子元素?
- 20. 使用jquery隐藏和显示元素
- 21. 在jQuery中隐藏和显示元素
- 22. jquery kill元素,而不是隐藏
- 23. 显示/隐藏DOM元素
- 24. 显示隐藏元素
- 25. Sencha显示/隐藏元素
- 26. 仅使用Javascript而不使用DOM的隐藏/显示元素
- 27. jQuery slideDown slideUP - 隐藏按钮
- 28. 在jQuery中显示隐藏元素表元素
- 29. JQuery:显示隐藏父元素内的子元素
- 30. 仅显示/隐藏最近的元素
Upvoted为了易读 – rossipedia 2011-03-09 08:05:20
我想展示div而不是隐藏它们家伙 – 2011-03-09 08:07:58
Umair,我有没有试过这个,但你可以尝试改变“隐藏”到“显示”,并改变你想要的方向。 – Jason 2011-03-09 08:13:31