单击按钮情况切换页脚
我已经研究了一个星期左右，我有一个有效但不太好的解决方案。
我有一个隐藏的页脚，上面有一个像按钮一样的标签。 单击此按钮后，我的页脚将向上滑动并同时按下该按钮。
我的问题来自于我无法将我的按钮放在页脚内。 由于页脚被隐藏直到被点击，因此该按钮也将被隐藏。
我尝试过的一种方法是隐藏页脚而不是隐藏页脚，我将其放在bottom以隐藏它直到被点击。 这个效果很好但是一旦点击它就可以向下滚动，之后就不会被隐藏了。
然后我决定隐藏/显示它，但这是按钮发生问题的地方。 由于页脚被隐藏，我无法将按钮放在页脚内。 由于按钮位于他的页脚之外，我试图为它设置动画，但它不会同时制作动画，这非常奇怪。
我做的最终解决方案是使用css3缓动，但它仍然不完美甚至可用，因为它是如何不刷新的。
我试图在准确的时间制作两个动画，同时看起来好像它们是一个对象。
这是我的HTML
Open Footer
这是我的CSS
footer { position: absolute; display: none; left: 0; bottom: 0; width: 100%; height: 20%; background: rgba(0, 0, 0, 0.69); } .fTab { width: 15%; height: 4em; position: absolute; bottom: 0; left: 2em; display: block; background: rgba(0, 0, 0, 0.69); color: #c1c1c1; line-height: 4em; text-align: center; font-size: 1.2em; border-radius: 10px 10px 0 0; cursor: pointer; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; } .fTab.current { bottom: 20%; }
这是我的jQuery
function footer() { var footerH = $('footer'); var fH = footerH.height(); $('.fTab').on('click', function() { $(this).toggleClass('current'); $('footer').slideToggle(500); }); } footer();
这是JSFIDDLE ，这是我尝试的另一个选项， JSFIDDLE 2
如果需要，这是现场 。
如果您还有其他需要，请告诉我，我感谢您的帮助！
我为你建造了一个裸骨小提琴，只有效果： http ： //jsfiddle.net/wa989/
诀窍是转换按钮的bottom值和页脚的height 。 无需使用jQuery进行滑动，因为您可以对按钮的位置和页脚的高度使用CSS3过渡。
您可能希望使用jQuery将按钮的文本切换为“隐藏页脚”。