Question

这可能非常明显，我完全错过了它。

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

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

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

谢谢，

罗尼

Answer 1

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

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

+-------------------------------------------+
|                                           |  ^
|                                           |  |  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调用此函数，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);
            }
        }
    });
});

您可以在this fiddle中进行测试。

Answer 2

如果使用带方向选项的幻灯片而不是盲目的话？这是一个 jsFiddle example 。

jQuery：

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

Answer 3

如果你可以使用jquery UI库，你可以：

$("div").hide("blind", {"direction": "down"});
$("div").show("blind", {"direction": "down"});

Answer 4

这不是诀窍：

$("div").show('blind', {}, 'slow');

Answer 5

盲效方向默认值："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>

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

5 个答案: