隐藏元素而不掩盖顶部的项目答案

【问题标题】：Hide an element without masking item over top隐藏元素而不掩盖顶部的项目
【发布时间】：2011-09-23 14:52:47
【问题描述】：

我创建了一个效果，其中一个 HTML 元素最初隐藏在另一个 HTML 元素后面，隐藏元素的 CSS 'top' 值被动画化，以平滑滑动的方式从遮蔽元素下方将其暴露出来。

有谁知道是否有一种方法可以在没有遮罩元素的情况下重新创建这种效果？

我想避免 jQuery'esque slideDown 显示元素的高度是动画的。

我觉得这是不可能的，但如果有人知道，您的建议将不胜感激。

【问题讨论】：

我不知道你是否想去掉遮罩元素，因为它在某种程度上令人反感；或者如果您希望掩码元素仅 appear 不存在。如果是后者，那么我将制作一个背景颜色与周围 div 的背景颜色相同的遮罩元素 div，这样被遮罩的元素似乎是从切入主背景的不可见槽中实现的。顺便说一句，谢谢你的想法。这可能是一个非常好的效果。
我知道您想避免下滑业务，但我认为您也可以在 top 发生变化的同时为 height 设置动画 以某种方式去除被屏蔽元素，完全消除了屏蔽元素。

标签： javascript jquery html jquery-animate slidedown

【解决方案1】：

您可以使用将overflow 设置为hidden 的包装器轻松完成此操作

http://jsfiddle.net/xvNf6/1/

HTML

<div id="wrapper" style="height:0px;">
    <div>content</div>
</div>

示例 CSS

#wrapper{width:300px;height:280px;margin:0 auto; overflow:hidden; background:#eee}

Javascript

//if you must not use jQuery
var animationTimer = setInterval(function(){
    var wrapper = document.getElementById("wrapper");
    wrapper.style.height = (parseInt(wrapper.style.height) + 1) + "px";
    if(parseInt(wrapper.style.height) >= 280)
        clearInterval(animationTimer)
},1);

//if you can use jQuery
$("#wrapper").animate({height:"280px"},1000);

【讨论】：

对不起，我忘了说我也不想调整我要暴露的元素的高度。想象一下，例如要曝光的元素是一张图像，因此虽然调整它的大小几乎可以达到预期的效果，但图像会显得被压扁。如果这有意义？
@Ashley 这就是溢出的重点：隐藏的 div。这样，它不会调整任何东西的大小，而是将其全部切断。

【解决方案2】：

将您的元素放在带有overflow:hidden 的父 div 中。然后，将您的元素定位到父 div 的边界之外，使其隐藏。

#wrapper { overflow: hidden; }
#target { height: 100px; top: -100px; } /* shift element out of view */

然后，您可以通过向{"top":0} 设置动画来显示它，以获得不会调整元素高度的向下滑动效果。

这是一个相当粗略的演示：http://jsfiddle.net/7RSWZ/

更新：这是另一个演示，它试图通过动态设置高度和top 值来更好地处理不同的内容大小。 http://jsfiddle.net/7RSWZ/2/

【讨论】：