Question

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

＆＃13;

       $("#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");
         }
       });

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

JSFIDDLE

然而，我发现当键盘向下滑动时，键盘上的某些东西是不对的。我的键盘将首先消失，并且在向下滑动动画之前它的背景将变为白色。我需要更改什么才能在向下滑动时键盘不会消失？

Answer 1

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

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

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

Answer 2

请看我的小提琴here。

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

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

Answer 3

您可以调整小键盘元素的高度而不是隐藏其内容，这样您的键盘就会顺畅地滑入和滑出。你也想设置你的＆＃34;屏幕的框尺寸＆＃34;如果您打算在没有太多高度调整的情况下完全看到边框，请使用边框：

＆＃13;

       $("#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"
           });
         }
       });

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

这是一个固定的 Fiddle

从底部滑动<div>

3 个答案: