jQuery UI盲目效果 - 从底部揭示

Question

这可能是非常明显的,我完全错过了它.

我搜索了几个小时,似乎无法找到一种方法,使用jQuery,从底部向上显示一个隐藏的div.我想要实现的目标与以下链接完全相同,但反之亦然:http://jqueryui.com/demos/show/

我可以将div从底部滑到顶部,但这会在它移动时显示出来,而不是被"蒙面".

就像我说的,这可能(应该？)非常明显,我没有看到它,但我一直在寻找年龄,并找不到这个相对简单的问题的解决方案.

谢谢,

罗尼

Answer 1

您正在寻找的效果有点难以实现,但即使没有包装元素也可以完成.

这里的主要问题是元素自然地呈现自上而下,而不是自下而上.动画相对定位元素的CSS top和heightCSS属性允许我们实现上滑效果,但元素仍将自上而下渲染:

+-------------------------------------------+
|                                           |  ^
|                                           |  |  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' 

我们可以用动画()有scrollTop,但与一起这样做top,并height没有在我的测试中正常工作(我怀疑scrollTop是复位时top或height在第一动画步骤中修改,所以它最终陷进去0).

为了解决这个问题,我们可以scrollTop通过我们可以传递的可选步骤函数来处理animate().该功能被称为有两个参数,now并且fx,now作为动画处理的属性的当前值和fx被周围有用信息的包装对象,像元件和属性进行动画.

由于我们总是想要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);
            }
        }
    });
});

你可以用这个小提琴来测试它.

Answer 2

如何使用带方向选项的滑块而不是盲目？这是一个jsFiddle示例.

jQuery的:

$( "#effect" ).show( 'slide', { direction: "down" } , 500);