Javascript 隐藏一个元素而不在顶部遮罩项目

我创建了一个效果，一个HTML元素最初隐藏在另一个HTML元素后面，隐藏元素的CSS“top”值被设置为动画，以平滑滑动的方式从掩蔽元素下面暴露出来

有人知道有没有一种方法可以在不使用遮罩元素的情况下重现这种效果

我想避免jQuery风格的向下滑动，其中显示的元素的高度是动画

---

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

你可以用一个溢出设置为隐藏的包装器轻松做到这一点

HTML Javascript

---

您可以使用溢出设置为hidden的包装器轻松实现这一点

HTML Javascript

---

将元素放置在溢出：隐藏的父div中。然后，将元素放置在父div的边界之外，以便将其隐藏

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

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

这是一个相当粗糙的演示：

---

更新：这里有另一个演示，它试图通过动态设置高度和顶部值来更好地处理不同的内容大小

将元素放置在父div中，溢出：隐藏。然后，将元素放置在父div的边界之外，以便将其隐藏

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

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

这是一个相当粗糙的演示：

---

更新：这里有另一个演示，它试图通过动态设置高度和顶部值来更好地处理不同的内容大小

我不知道你是否想摆脱掩蔽元素，因为它有点冒犯性；或者，如果您希望屏蔽元素只是看起来不存在。如果是后者，那么我将制作一个掩蔽元素div，其背景色与周围div的背景色相同，这样，掩蔽元素似乎从一个切入主背景的不可见槽中具体化。顺便说一句，谢谢你的想法。这可能是一个非常好的效果。我知道你想避免下滑业务，但我认为你也可以，在顶部发生变化的同时，以某种方式设置遮罩元素高度的动画，完全消除遮罩元素。我不知道你是否想摆脱遮罩元素，因为它以某种方式具有攻击性；或者，如果您希望屏蔽元素只是看起来不存在。如果是后者，那么我将制作一个掩蔽元素div，其背景色与周围div的背景色相同，这样，掩蔽元素似乎从一个切入主背景的不可见槽中具体化。顺便说一句，谢谢你的想法。这可能是一个非常好的效果。我知道你想避免下滑业务，但我认为你也可以，在顶部发生变化的同时，以某种方式设置遮罩元素高度的动画，完全消除遮罩元素。对不起，我忘了提到我也不想调整我暴露的元素的高度。例如，假设要曝光的元素是一个图像，因此，虽然调整其大小几乎可以达到所需的效果，但图像看起来会被压扁。如果这有意义的话？@Ashley这就是溢出的要点：隐藏div。这样，它不会调整任何大小，而是会将其全部切断。对不起，我忘了提到我也不想调整我要暴露的元素的高度。例如，假设要曝光的元素是一个图像，因此，虽然调整其大小几乎可以达到所需的效果，但图像看起来会被压扁。如果这有意义的话？@Ashley这就是溢出的要点：隐藏div。这样，它就不会调整任何大小，而是将其全部切断。

//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);

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