jQuery UI 盲区效果 - 从底部显示 [英] jQuery UI blind effect - reveal from bottom

问题描述

这可能真的很明显，我完全错过了.

This could be really obvious and I'm completely missing it.

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

I've searched for hours and can't seem to find a way to, using jQuery, reveal a hidden div from the bottom up. What I am trying to achieve is exactly as in the following link, but in reverse: http://jqueryui.com/demos/show/

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

I can slide a div from the bottom to the top, but this reveals itself as it moves, rather than being 'masked' in.

就像我说的，这可能(应该?)非常明显，但我没有看到，但我已经找了很长时间了，但找不到解决这个相对简单的问题的方法.

Like I said, this could (should?) be really obvious and I'm not seeing it, but I've been looking for ages and can't find a solution to this relatively simple problem.

谢谢，

罗尼

推荐答案

您想要的效果实现起来有点棘手，但即使没有包装元素也可以做到.

The effect you're looking for is a little tricky to achieve, but it can be done, even without a wrapper element.

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

The main issue here is that elements naturally render top-down, not bottom-up. Animating both the top and height CSS properties of a relatively-positioned element allows us to implement a slide-up effect, but the element will still render top-down:

+-------------------------------------------+
|                                           |  ^
|                                           |  |  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 动画期间元素的属性，以使其下部始终保持在视图中:

If we want to simulate bottom-up rendering, we have to modify the scrollTop property of the element during the animation, in order for its lower part to always remain in view:

+-------------------------------------------+
|                                           |  ^
|  |  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).

We can use animate() with scrollTop, but doing so in conjunction with top and height did not work correctly in my tests (I suspect scrollTop is reset when top or height are modified in the first animation step, so it ends up stuck to 0).

为了解决这个问题，我们可以通过可选的步骤自己处理scrollTop 函数，我们可以传递给 animate().这个函数用两个参数调用，now 和 fx，now 是动画属性的当前值，fx> 是围绕有用信息的包装对象，例如正在动画的元素和属性.

To work around this, we can handle scrollTop ourselves through the optional step function we can pass to animate(). This function is called with two arguments, now and fx, now being the current value of the animated property and fx being a wrapper object around useful information, like the element and property being animated.

因为我们总是希望 scrollTop 和 top 一样，所以我们只需要测试 top 是否在我们的 中被动画>step 功能.如果是，我们将 scrollTop 设置为 now.这个解决方案给出了可以接受的结果，尽管它对我的口味来说有点闪烁(不过，这可能是我的浏览器的产物).

Since we always want scrollTop to be the same as top, we only have to test if top is being animated in our step function. If it is, we set scrollTop to now. This solution gives acceptable results, although it flickers a little too much for my taste (that might be an artifact of my browser, though).

所以，总而言之，要实现这种效果，我们必须:

So, in summary, to implement that effect, we have to:

• 获取元素的原始高度，
• 使元素 position:relative; 以便我们可以为其 top 属性设置动画，
• 通过将top设置为原始高度并将height设置为0来折叠元素，
• 显示元素(因为 display: none; 被应用，所以在你的小提琴中是必需的)，
• 动画 top 到 0 和 height 到原始高度，
• 在每个动画步骤中为 scrollTop 提供 top 的值.

• Fetch the element's original height,
• Make the element position: relative; so we can animate its top property,
• Collapse the element by setting top to the original height and height to 0,
• Show the element (necessary in your fiddle since display: none; is applied),
• Animate top to 0 and height to the original height,
• Give scrollTop the value of top on each animation step.

产生以下代码:

$("#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);
            }
        }
    });
});

您可以在this fiddle中对其进行测试.

You can test it in this fiddle.

这篇关于jQuery UI 盲区效果 - 从底部显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！