通过单击按钮情况切换页脚 [英] Toggle a footer by clicking a button situation

问题描述

我一直在这个工作一个星期左右，我有一个解决方案，但工作但不是很好。

我有一个隐藏的页脚与选项卡按钮。点击此按钮后，我的页脚将向上滑动，然后将该按钮向上推。

我的问题来自我无法放置我的按钮里面的页脚。由于页脚被隐藏直到点击，按钮也会被隐藏。

我尝试的一种方法是代替隐藏页脚我放置了一个负值底部可将其隐藏，直到点击。这是工作很好，但一旦它被点击，你可以只向下滚动，它从来没有隐藏后。

然后我决定隐藏/显示它，但这是问题出现在按钮的地方。由于页脚被隐藏，我无法将按钮放在页脚内部。由于按钮是在页脚外面，我试图动画它，但它不会动画在同一时间，这是非常奇怪。

我做的最后一个解决方案是使用css3 easing，但是它仍然不完美，甚至可以使用，因为它是如何不冲洗。

b $ b

这是我的 HTML

 < span class =fTab>打开页脚< / span> 
< footer> 
< / footer> 
       / strong> 
 页脚{
 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'）; 
 $ '）.slideToggle（500）; 
}）; 
} 
 
 footer（）; 
  
这里是 JSFIDDLE ，这里是我尝试的另一个选项， JSFIDDLE 2  
 
 
 
以下是 LIVE SITE  
 
 
 
如果你需要其他的东西，请让我知道，我很欣赏任何和所有的帮助。
解决方案
我已经为你建了一个裸骨干，只是效果： http://jsfiddle.net / wa989 /  
 
 
 
诀窍是转换您的按钮的底部值和< c $ c> height 。不需要使用jQuery滑动，因为你可以使用CSS3过渡的按钮的位置和页脚的高度。 
 
 
 
您可能希望使用jQuery将按钮的文本切换为隐藏页脚。
 
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!
解决方案
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.

                        
这篇关于通过单击按钮情况切换页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！