Toggle a footer by clicking a button situation

问题

I have been working on this for a week or so and I have a solution that works but not very well.

I have a hidden footer with a tab like button above it. When this button is clicked my footer will then slide up and push that button up as well.

My problem comes from me being unable to place my button inside of the footer. Since the footer is hidden until clicked the button would also be hidden.

One method I tried was instead of hiding the footer I placed a negative bottom on it to hide it until clicked. This was working well but once it was clicked you could just scroll back down and it was never hidden after that.

I then decided I would have to hide/show it but this is where the problem came about with the button. Since the footer is hidden I can not place the button inside of the footer. Since the button is outside of he footer I have tried to animate it but it would not animate at the same time which was very odd.

The final solution I did was using css3 easing but it still is not perfect or even usable due to how un-flushed it is.

I am trying to make both animate at the exact time while looking as if they are one object.

Here is my HTML

<span class="fTab">Open Footer</span>
<footer>
</footer>

Here is my 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%;
}

Here is my jQuery

function footer() {
  var footerH = $('footer');
  var fH = footerH.height();

  $('.fTab').on('click', function() {
      $(this).toggleClass('current');
      $('footer').slideToggle(500);
  });
}

footer();

Here is the JSFIDDLE and here is another option I was trying, JSFIDDLE 2

Here is the LIVE SITE if that is needed.

If you need anything else then let me know and I appreciate any and all help!

回答1:

I've built a bare bones fiddle for you, with just the effect: http://jsfiddle.net/wa989/

The trick is transitioning both the bottom value of your button and the height of the footer. No need to slide with jQuery, since you can use CSS3 transitions for both the button's position and the footer's height.

You may want to use jQuery to switch the button's text to 'Hide footer' though.

来源：https://stackoverflow.com/questions/19842353/toggle-a-footer-by-clicking-a-button-situation

标签

jquery

css

css3

slidetoggle