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

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

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

Answer 4

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

Answer 5

jQuery 切换

此切换效果仅适用于上下。 Jquery UI 适用于所有其他方向

Answer 6

对于那些不使用 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 答案

Answer 7

尽管名称如此，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>

Answer 8

在遇到一个希望“向上滑动总是隐藏”错误容器的学生时，我建议他简单地使用 CSS 转换：

.slide-up {
  transition: 1s ease-out;
  transform: scale(1);
}

.slide-up[aria-hidden="true"] {
  transform: scale(0);
  height: 0;
}

jQuery(document).ready(function($) {
  const $submitButton = $(".btn");
  const $someDivs = $("div");
  const $animatedSlidingTargets = $(".slide-up");
  $someDivs.on("click", function() {
    $animatedSlidingTargets.attr("aria-hidden", true);
  });
});

Answer 9

对于@Jason的回答，无论是上滑显示还是下滑隐藏，还是需要使用jQuery中的{ direction: "down" }选项：

$(".btnAbout").on("click", function () {
    // Slide-up to show
    $("#divFooter").show("slide", { direction: "down" }, 1000);
});

$("#btnCloseFooter").on("click", function () {
    // Slide-down to hide
    $("#divFooter").hide("slide", { direction: "down" }, 1000);
});

但这需要jquery-ui ，否则你会遇到TypeError: something.easing[this.easing] is not a function错误：

<script defer src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

Answer 10

我有一些反对票，所以我检查了我的答案，确实我没有正确回答 OP 问题，抱歉。 所以我要尝试解决这个问题。

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

通过知道我认为我们同意那里没有魔术功能来执行向上滑动效果来显示元素（在 JQuery 中）。

所以我们需要做一些工作来获得我们需要的东西：向上滑动显示效果。 我找到了一些解决方案，这是一个我认为很容易实现的解决方案：

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

上面的解决方案适用于悬停事件，对于单击事件，请尝试以下修改后的代码：

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

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

对不起，我第一次的误解。

---

旧答案

这是一个旧帖子，但如果有人正在寻找解决方案，这是我的建议。

现在，我们可以使用slideToggle()来实现这种效果（无需 jQuery UI）。

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

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