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一起使用，但必须与和height在我的测试中无法正常工作(我怀疑在动画的第一步中修改top或height时会重置scrollTop，因此最终会卡在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).

要解决此问题，我们可以通过可选的 step 函数自行处理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相同，因此我们只需测试step函数中的top是否已设置动画.如果是，我们将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);
            }
        }
    });
});

您可以在此小提琴中对其进行测试.

You can test it in this fiddle.

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