单击按钮情况切换页脚

Question

我已经在这方面工作了一个星期左右,我有一个有效但不太好的解决方案.

我有一个隐藏的页脚,上面有一个像按钮一样的标签.单击此按钮后,我的页脚将向上滑动并同时按下该按钮.

我的问题来自于我无法将我的按钮放在页脚内.由于页脚被隐藏直到被点击,因此该按钮也将被隐藏.

我尝试过的一种方法是不使用隐藏页脚,而是bottom在其上放置一个负片以隐藏它直到被点击.这很好用,但是一旦点击它就可以向下滚动,之后就不会被隐藏了.

然后我决定隐藏/显示它,但这是按钮出现问题的地方.由于页脚是隐藏的,我不能将按钮放在页脚内.由于按钮位于他的页脚之外,我试图为它设置动画,但它不会同时生成动画,这非常奇怪.

我做的最终解决方案是使用css3缓动,但它仍然不完美甚至可用,因为它是如何不刷新.

我试图在准确的时间制作两个动画,同时看起来好像它们是一个对象.

这是我的 HTML

<span class="fTab">Open Footer</span>
<footer>
</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

如果需要,这是现场.

如果您还有其他需要,请告诉我,我感谢您的帮助!

Answer 1

我为你建造了一个裸骨小提琴,效果如下:http://jsfiddle.net/wa989/

诀窍是转换bottom按钮的值和height页脚的值.无需使用jQuery进行滑动,因为您可以对按钮的位置和页脚的高度使用CSS3过渡.

您可能希望使用jQuery将按钮的文本切换为"隐藏页脚".