jquery - 页脚动画和 jQuery？

Question

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

我如何使用 jQuery、HTML 和 CSS 来完成此任务？

编辑:

我希望页脚以大约 20px 的高度开始。在页脚中，应该有一个按钮(我猜是一个链接)，上面写着“更多”或“关于”。当用户单击时，页脚应该变高并显示更精致的 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(这在粘性页脚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 中 - 因此，如果您想在内容较小时显示一组内容，在内容较大时显示不同的内容，则只需将这些 block 放入页脚内的两个单独的 div 中即可。将它们设置为 position:absolute;top:0;，这样它们就会在页脚内彼此重叠。最初将“展开 View ”设置为 display:none ，然后使用 jquery 的 fadeIn() 和 fadeOut() 函数，在点击中处理程序(或动画回调)，以交换页脚内展开和折叠 View 的可见性。

Here's the jsFiddle example, adjusted accordingly

<小时/>

现在，如果您真的想要变得更奇特，您可以使页脚高度取决于两个不同内容 View 的高度。 (这可能就是我会做的)。

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

<小时/>

编辑:如果交换两个 animate 调用的顺序(因此 $('#main').animate(...) 位于 之前$('#footer').animate(...))，动画运行会更加流畅，并且滚动条在动画过程中不会闪烁。 (我本来应该这样展示的)。 here's an updated jsFiddle, that shows this minor change .