6

这可能非常明显，我完全想念它。

我已经搜索了几个小时，似乎无法找到一种方法来使用 jQuery 从下往上显示隐藏的 div。我想要实现的与以下链接完全相同，但相反：http: //jqueryui.com/demos/show/

我可以将一个 div 从底部滑到顶部，但这会在它移动时显示出来，而不是被“掩盖”。

就像我说的，这可能（应该？）真的很明显，我没有看到，但我一直在寻找年龄，无法找到解决这个相对简单问题的方法。

谢谢，

罗尼

4

5 回答 5

14

您正在寻找的效果有点难以实现，但即使没有包装器元素，也可以做到。

这里的主要问题是元素自然呈现自上而下，而不是自下而上。top为相对定位元素的 the和CSS 属性设置动画height允许我们实现上滑效果，但该元素仍会自上而下呈现：

+-------------------------------------------+
|                                           |  ^
|                                           |  |  Hidden area collapses upwards.
|                                           |  |
+-------------------------------------------+ <-- 'top'
|                                           |  ^
|  |  Upper part of element (visible).      |  |  
|  |                                        |  |  Animation goes bottom-up.
|  |  Element still renders top-down.       |  |  
|  |                                        |  |
+--|----------------------------------------+ <-- 'top + height' 
|  |                                        |  |
|  |  Lower part of element (hidden).       |  |
|  V                                        |  |
+-------------------------------------------+

如果我们想模拟自底向上渲染，我们必须在动画期间修改元素的scrollTop属性，以使其下部始终保持在视图中：

+-------------------------------------------+
|                                           |  ^
|  |  Upper part of element (hidden).       |  |  Hidden area collapses upwards.
|  |                                        |  |
+--|----------------------------------------+ <-- 'top' and 'scrollTop'
|  |                                        |  ^
|  |  Element still renders top-down.       |  |  
|  |                                        |  |  Animation goes bottom-up.
|  |  Lower part of element (visible).      |  |  
|  V                                        |  |
+-------------------------------------------+ <-- 'top + height'

我们可以将animate()与一起使用scrollTop，但在我的测试中与它一起使用top并且height无法正常工作（我怀疑在第一个动画步骤中scrollTop被重置top或被height修改，所以它最终被卡住了0）。

为了解决这个问题，我们可以scrollTop通过我们可以传递给的可选step函数来处理自己animate()。这个函数用两个参数调用，now和是动画属性的当前值，是fx有用信息的包装对象，比如被动画的元素和属性。nowfx

由于我们总是希望scrollTop与 相同top，因此我们只需要测试是否在我们的函数top中进行动画处理。step如果是，我们设置scrollTop为now。这个解决方案给出了可以接受的结果，尽管它对我的口味来说有点闪烁（不过，这可能是我的浏览器的产物）。

因此，总而言之，要实现这种效果，我们必须：

  • 获取元素的原始高度，
  • 制作元素position: relative;，以便我们可以为其top属性设置动画，
  • top通过将元素设置为原始高度和height来折叠元素0，
  • 显示元素（在你的小提琴display: none;中是必要的，因为应用了），
  • 动画top到原始高度0，height
  • 给出每个动画步骤scrollTop的值top。

导致以下代码：

$("#click").click(function() {
    var $revealMe = $("#revealMe");
    var originalHeight = $revealMe.height();
    $revealMe.css({
        position: "relative",
        top: originalHeight,
        height: 0
    }).show().animate({
        top: 0,
        height: originalHeight
    }, {
        duration: 1000,
        step: function(now, fx) {
            if (fx.prop == "top") {
                $(fx.elem).scrollTop(now);
            }
        }
    });
});

你可以在这个 fiddle中测试它。

于 2012-04-12T16:02:54.653 回答
6

使用带有方向选项的幻灯片而不是盲目的怎么样？这是一个jsFiddle 示例。

jQuery：

$( "#effect" ).show( 'slide', { direction: "down" } , 500);
于 2012-04-12T14:06:53.793 回答
3

如果您可以使用 jQuery UI 库，您可以：

$("div").hide("blind", {"direction": "down"});
$("div").show("blind", {"direction": "down"});
于 2013-07-09T16:05:13.820 回答
0

这不是诀窍吗：

$("div").show('blind', {}, 'slow');
于 2012-04-12T14:08:07.667 回答
0

盲效果方向默认："up"。

可能的值：up, down, left, right, vertical, horizontal.

Documentation

例子：

$( document ).click(function() {
  $( "#toggle" ).toggle( "blind", {"direction": "down"}, 1000 );
});
#toggle {
  width: 100px;
  height: 100px;
  background: #ccc;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>

于 2016-04-15T18:38:59.163 回答