页脚动画和 jQuery？

Question

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

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

编辑：

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

Answer 1

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

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

1. 构建 css，使初始页脚高度为 0。确保还将依赖于页脚高度的其他 css 值归零（即 padding-bottom< /code> 在 #main 上，margin-top 在 #footer 上）。您还需要在 #footer 上设置 overflow:hidden，以确保页脚内容在折叠时不可见。

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

3. animate() 函数采用四个参数（请参阅此处的文档 ），最后一个是动画完成时将触发的回调。您可以从此回调函数中触发链接交换。

因此，假设您从 CSSStickyFooter 中的 HTML/CSS 开始，其余代码看起来会是这样像下面这样...

你的CSS（这在粘性页脚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
        });
    });
});

---

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

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

这是 jsFiddle 示例，进行了相应调整

---

现在，如果你真的想变得更奇特，你可以制作页脚高度取决于两个不同内容视图的高度。 （这可能就是我会做的）。

这里有一个“更高级的”jsFiddle，可以根据内容计算高度

---

编辑：如果交换两个 animate 调用的顺序（因此 $('#main').animate(...) 位于 $('#footer').animate(.. .))，动画运行会更加流畅，并且滚动条在动画过程中不会闪烁。 （我本来应该这样展示的）。 这里是更新的 jsFiddle，显示了这一微小的变化。