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的修改版本反向：{ {3}}

由于animate是一个内置的jQuery函数，因此您不需要包含jQuery UI。

Answer 3

我找到了一个棘手的方法...... 你可以用css样式底部设置div：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); }

Answer 5

Jquery toggle

此切换效果仅适用于上下。 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

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

我有一些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();
});

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

jQuery slideUp显示元素而不是隐藏

9 个答案: