从底部滑动 <div>答案

【问题标题】：Sliding a <div> from the bottom从底部滑动 <div>
【发布时间】：2015-08-07 16:35:47
【问题描述】：

我正在尝试创建一个可以使用 jQuery 动画从底部向上滑动的键盘。键盘将首先隐藏在页面底部，只有当我按下按钮时才会向上滑动。下面是代码：

       $("#keypad-toggle").click(function(e) {
         e.preventDefault();
         if ($("#qnumbers").hasClass("toggled")) {
           $("#qnumbers").animate({
             "height": "390px"
           }).removeClass("toggled");
           $("#num").css("display", "none");
         } else {
           $("#qnumbers").animate({
             "height": "250px"
           }).addClass("toggled");
           $("#num").css("display", "inline");
         }
       });

#qnumbers {
  background-color: #3C4050;
  height: 390px;
  overflow: auto;
}
#keypad {
  height: 30px;
  background-color: springgreen;
  text-align: center;
}
#numpad {
  background-color: springgreen;
}
#screen {
  border: 2px solid black;
  height: 140px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="qnumbers" class="container-fluid">
  <div id="servenumber"></div>
</div>
<div id="keypad" class="container-fluid"><a href="#keypad-toggle" id="keypad-toggle"><span class="glyphicon glyphicon-th"></span> Number Pad</a>

</div>
<div id="numpad" class="container-fluid">
  <div id="num" style="display:none;">
    <div id="screen">1234567890</div>
  </div>
</div>

JSFIDDLE

但是，我发现键盘向下滑动时出现了问题。我的键盘会先消失，然后在下滑动画出现之前，它的背景会变成白色。我必须更改什么才能使键盘在向下滑动时不会消失？

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

$("#num").css("display", "none");

此代码在制作动画时运行。要在动画完成后运行代码，您可以像这样附加回调函数。

$("#qnumbers").animate({"height": "390px"},function(){
    $("#num").css("display", "none"); 
}).removeClass("toggled");

【讨论】：

很好的解决方案，谢谢！
你知道为什么每次上下滑动都会出现垂直滚动条吗？
有没有办法去掉滚动条？
@Coolguy 使用 overflow-y:hidden CSS 来移除滚动条。在这种情况下，body{ overflow-y:hidden }
@Coolguy 您可能只想隐藏小键盘部分，而不是其他两个部分。然后，用
包裹整个内容

【解决方案2】：

请看我的小提琴here。

我编辑了您打开的切换代码，以便在切换后使用动画回调显示：

    if ($("#qnumbers").hasClass("toggled")) {
        $("#qnumbers").animate({
            "height": "390px"
        }, function() { /* added callback for animation */
           $("#num").hide();
        }).removeClass("toggled");
    }

【讨论】：

你知道为什么每次上下滑动都会出现垂直滚动条吗？看起来有点奇怪。
有没有办法去掉滚动条？
我不确定，这取决于容器的高度。也许你可以给 body 元素溢出：隐藏。

【解决方案3】：

你可以调整小键盘元素的高度而不是隐藏它的内容，这样你的小键盘就会平滑地滑入和滑出。如果您打算在没有太多高度调整的情况下让边框完全可见，您还想将“屏幕”的框大小设置为边框框：

       $("#keypad-toggle").click(function(e) {
         e.preventDefault();
         if ($("#qnumbers").hasClass("toggled")) {
           $("#qnumbers").animate({
             "height": "390px"
           }).removeClass("toggled");
           $("#numpad").animate({
             "height": "0"
           });
         } else {
           $("#qnumbers").animate({
             "height": "250px"
           }).addClass("toggled");
           $("#numpad").animate({
             "height": "140px"
           });
         }
       });

#qnumbers {
  background-color: #3C4050;
  height: 390px;
  overflow: auto;
}
#keypad {
  height: 30px;
  background-color: springgreen;
  text-align: center;
}
#numpad {
  background-color: springgreen;
  overflow: hidden;
  height: 0;
}
#screen {
  border: 2px solid black;
  height: 140px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="qnumbers" class="container-fluid">
  <div id="servenumber"></div>
</div>
<div id="keypad" class="container-fluid"><a href="#keypad-toggle" id="keypad-toggle"><span class="glyphicon glyphicon-th"></span> Number Pad</a>

</div>
<div id="numpad" class="container-fluid">
  <div id="num">
    <div id="screen">1234567890</div>
  </div>
</div>

这里是固定的Fiddle

【讨论】：