gpt4 book ai didi

jQuery:如何通过将高度添加到元素顶部来制作更高的动画?

转载 作者:行者123 更新时间:2023-11-27 22:36:18 25 4
gpt4 key购买 nike

我有一个简单的问题,但我不确定如何解决。

基本上我有一些隐藏内容,展开后需要 99px 的高度。折叠时,持有它的元素 section#newsletter 的高度设置为 65px。

实例:http://dev.supply.net.nz/asap-finance-static/

在点击 a#signup_form 时,section#newsletter 使用以下 jQuery 扩展到 99px:

$('#newsletter_form').hide(); // hide the initial form fields
$('#form_signup').click(function(event) {
event.preventDefault(); // stop click
// animate
$('section#newsletter').animate({height: 99}, 400, function() {
$('#newsletter_form').show(300);
})
});

所有这一切都很好,除了这个元素位于一个粘性页脚中,因此它的初始高度用于定位它。

动画这个元素的高度会导致浏览器上的滚动条,因为添加的 34px 被添加到元素的底部,所以我的问题:

如何将这些 34px 添加到元素的顶部,以便高度向上扩展到主体而不是向下?

感谢阅读,我期待着您的帮助和建议。

詹尼斯

最佳答案

只是发布针对我的特定问题的完整解决方案,以防对其他人有所帮助,这是代码:

JS:

$('your_trigger').click(function(event) { // click on the button to trigger animation
event.preventDefault(); // stop click
// animate
function resizer () {
// run inside a function to execute all animations at the same time
$('your_container').animate({marginTop: 0, height:99}, 400, function() {
$('#newsletter_form').show(300); // this is just my content fading in
});
// this is the footer container (inside is your_container)
// & div.push (sticky footer component)
$('footer,.push').animate({marginTop:0}, 400);
};
resizer(); // run
});

CSS:(this is the sticky footer i am using)

/* ================= */
/* = STICKY FOOTER = */
/* ================= */
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -135px; /* -full expanded height of the footer */
position: relative;
}
footer, .push {
height: 101px; /* height of this is equal to the collapsed elements height */
clear: both;
}
section#newsletter,footer {
margin-top: 34px;
/* this is the difference between the expanded and the collapsed height */
}

所以基本上我将我的 footer 定位为我通常使用 TOTAL 的全高(在动画高度之后),然后我通过 margin-top 向下推初始内容以补偿较小的your_container 折叠时的高度值。

然后在动画上调整 your_container 的高度和 your_containerfooter & .push 被删除。

希望这对偶然发现此问题的其他人有所帮助。

J.

关于jQuery:如何通过将高度添加到元素顶部来制作更高的动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2460039/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com