页脚动画和jQuery？

Question

我有一个页脚，我使用sticky footer css 将其保留在页面底部。我希望我的页脚开始折叠，当用户单击一个按钮时，我希望它展开，然后将“展开”链接与页脚 div 内的不同容器 div 交换。

我将如何使用 jQuery、HTML 和 CSS 实现这一点？

编辑：

我希望页脚以大约 20 像素的高度开始。在页脚中，应该有一个按钮（我猜是链接），上面写着“更多”或“关于”。当用户单击时，页脚应该变高并显示更精细的 div，并带有替代内容（不是“更多”链接）。

Answer 1

This jsFiddle 演示了滑入的基本方法。

以下是您将在那里找到的内容的摘要：

1. 构建您的 css，使初始页脚高度为 0。确保也将取决于页脚高度的其他 css 值清零（即 #main 上的 padding-bottom 和 #footer 上的 margin-top )。您还需要在#footer 上设置overflow:hidden，以确保页脚内容在折叠时不可见。

2. 在链接的click() 处理程序中，使用jQuery 的animate() 函数来增加#footer 的高度（并同时进行其他必要的填充/边距调整）。

3. animate() 函数有四个参数 (see docs here)，最后一个是动画完成时触发的回调。您可以在此回调函数中触发链接交换。

因此，假设您从CSSStickyFooter 开始使用 HTML/CSS，那么您的其余代码将如下所示...

你的 CSS（这在 stickyfooter css 之后）：

#main { 
    padding-bottom: 0; 
}  
#footer { 
    margin-top: 0;
    height: 0; 
    overflow:hidden;
} 

你的 Javascript 应该是这样的：

$(document).ready(function(){
    $('#showFooter').click(function(evt) {
        $('#footer').animate({
            'margin-top' : -150,
            'height' : 150
        }, null, null, function() {
            alert("footer slide-in is complete.");
            // do your "link swap" operation (whatever it is) right here. 
        });
        $('#main').animate({
            'padding-bottom' : 150
        });
    });
});

---

编辑：如果您想让页脚最初可见（以较小的尺寸），然后让它“滑出”到更大的尺寸，只需设置您想要的任何高度（而不是 0 ) 在我上面显示的 css 中。

您可以将任何您喜欢的内容放入页脚 div 中——因此，如果您想在较小的时候显示一组内容，而在较大的时候显示不同的内容，那么只需将这些块放入页脚中的两个单独的 div 中.将它们设置为position:absolute;top:0;，这样它们就会在页脚中相互重叠。最初将“扩展视图”设置为display:none，然后在单击处理程序（或动画回调）中使用jquery的fadeIn()和fadeOut()函数来交换页脚中展开和折叠视图的可见性.

Here's the jsFiddle example, adjusted accordingly

---

现在，如果您真的想变得花哨，您可以使页脚高度取决于两个不同内容视图的高度。 （这可能是我会做的）。

here's a "fancier" jsFiddle that figures the heights from the content

---

编辑：如果你交换两个动画调用的顺序（所以$('#main').animate(...)在$('#footer').animate(...)之前），动画将运行更流畅，滚动条不会闪烁/动画期间关闭。 （我本来应该这样展示的）。 here's an updated jsFiddle, that shows this minor change.