页脚动画和jQuery？

Question

我有一个页脚,我使用粘性页脚css保持在页面底部.我希望我的页脚开始折叠,当用户点击按钮时,我希望它展开,然后将"展开"链接与div页脚内的不同容器交换div.

我将如何使用jQuery,HTML和CSS实现这一目标？

编辑:

我希望页脚以大约20px的高度开始.在页脚中,应该有一个按钮(我猜是一个链接,说"更多"或"约").当用户点击时,页脚应该更高并显示更精细的div,具有替代内容(而不是"更多"链接).

Answer 1

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

以下是您将在那里找到的摘要:

1. 构建你的css,使初始页脚高度为0.确保也将其他依赖于页脚高度的css值清零(即padding-bottom在#main和margin-topon上#footer).您还需要设置overflow:hidden上#footer,以确保当它被折叠页脚内容是不可见的.

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

3. 该animate()函数有四个参数(参见此处的文档),最后一个是动画完成时将触发的回调.您可以在此回调函数中触发链接交换.

因此,假设您从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
        });
    });
});

编辑:如果你想最初看到页脚(在一些较小的尺寸),然后让它"滑出"到一个更大的尺寸,只需在我上面显示的CSS中设置你想要的任何高度(而不是0).

你可以把你喜欢的任何内容放到页脚div中 - 所以如果你想要显示一组内容,当它很小,而不同的内容,当它很大时,那么只需将这些块放在页脚内的两个单独的div中.设置它们position:absolute;top:0;,所以它们将在页脚内相互顶部.将"展开的视图"设置为display:none最初,然后在单击处理程序(或动画回调)中使用jquery fadeIn()和fadeOut()函数来交换页脚中展开和折叠视图的可见性.

这是jsFiddle示例,相应调整

现在,如果你真的想要花哨,你可以使页脚高度取决于两个不同内容视图的高度.(这可能就是我要做的).

这里有一个"发烧友"的jsFiddle,它从内容中找出了高度

编辑:如果您交换两个动画调用的顺序($('#main').animate(...)之前$('#footer').animate(...)也是如此),动画将运行得更顺畅,并且动画期间滚动条不会闪烁.(我原本应该这样表现出来). 这是一个更新的jsFiddle,显示了这个微小的变化.