jQuery UI盲目效果 – 从底部揭示
这可能是非常明显的，我完全错过了它。
我已经搜索了几个小时，似乎无法找到一种方法，使用jQuery，从底部向上显示一个隐藏的div。 我想要实现的目标与以下链接完全相同，但相反： http ： //jqueryui.com/demos/show/
我可以将div从底部滑到顶部，但这会在它移动时显示出来，而不是被“掩盖”。
就像我说的，这可能（应该？）真的很明显，我没有看到它，但我一直在寻找年龄，无法找到解决这个相对简单的问题。
谢谢，
罗尼
您正在寻找的效果有点难以实现，但即使没有包装元素也可以完成。
这里的主要问题是元素自然地呈现自上而下，而不是自下而上。 动画相对定位元素的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'
我们可以使用带有scrollTop animate（） ，但是在我的测试中，这与top和height一起使用是不正常的（我怀疑在第一个动画步骤中top或height被修改时scrollTop被重置，所以它最终被粘到0 ）。
要解决这个问题，我们可以通过我们可以传递给animate()的可选步骤函数自己处理scrollTop 。 使用两个参数now来调用此函数， now和fx ， now是动画属性的当前值， fx是围绕有用信息的包装器对象，如动画元素和属性。
因为我们总是希望scrollTop与top相同，所以我们只需测试top是否在我们的step函数中被动画化。 如果是，我们将scrollTop设置为now 。 这个解决方案给出了可接受的结果，虽然它对我的品味有点过分（但可能是我的浏览器的神器）。
总而言之，要实现这种效果，我们必须：
- 获取元素的原始高度，
- 使元素
position: relative;所以我们可以动画它的top属性， - 通过将
top设置为原始高度和height为0来折叠元素， - 显示元素（因为
display: none;所以你的小提琴是必需的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); } } }); });
你可以在这个小提琴中测试它。
如何使用带方向选项的滑块而不是盲目？ 这是一个jsFiddle示例 。
jQuery的：
$( "#effect" ).show( 'slide', { direction: "down" } , 500);
如果你没有使用jquery UI库，你可以：
$("div").hide("blind", {"direction": "down"}); $("div").show("blind", {"direction": "down"});
这不是诀窍：
$("div").show('blind', {}, 'slow');
盲效方向默认： "up" 。
可能的值： up ， down ， left ， right ， vertical ， horizontal 。
文档
例：
$( document ).click(function() { $( "#toggle" ).toggle( "blind", {"direction": "down"}, 1000 ); });
#toggle { width: 100px; height: 100px; background: #ccc; }
Click anywhere to toggle the box.