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

如果需要，这是LIVE SITE。

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

Answer 1

我为你建造了一个裸骨小提琴，只有效果：http://jsfiddle.net/wa989/

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

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

单击按钮情况切换页脚

1 个答案: