jQuery slideUp显示元素而不是隐藏

Question

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

我发现了一个棘手的方法...
您可以将div设置为css样式bottom：0px，添加呼叫
$("#div).slideDown();
将以所需的slideUp-to-show效果显示。

Answer 4

与slideUp和slideDown相反.将这两个函数添加到jQuery中.

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