隐藏元素而不遮盖顶部的项目

发布于 2024-12-06 05:04:27 字数 226 浏览 1 评论 0原文

我创建了一种效果，其中一个 HTML 元素最初隐藏在另一个 HTML 元素后面，并且隐藏元素的 CSS“顶部”值进行动画处理，以平滑的滑动动作将其从遮罩元素下方暴露出来。

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

我想避免 jQuery 式的 SlideDown，其中显示的元素的高度是动画的。

我觉得这是不可能的，但如果有人知道的话，我们将非常感谢您的建议。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千と千尋 2024-12-13 05:04:27

您可以使用将 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);

You can easily do this with a wrapper that has overflow set to hidden

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

HTML

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

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

回复收藏 0 原文

怀中猫帐中妖 2024-12-13 05:04:27

使用 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/

Place your element within a parent div with overflow:hidden. Then, position your element beyond bounds of the parent div so that it is hidden.

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

You can then reveal it by animating to {"top":0} to get the slidedown effect that doesn't resize the height of the element.

Here's a rather crude demo: http://jsfiddle.net/7RSWZ/

Update: Here's another demo that attempts to deal better with different content sizes by dynamically setting the heights and top values. http://jsfiddle.net/7RSWZ/2/

回复收藏 0 原文

~没有更多了~