滑动一个 <div> 从底部

Question

我正在尝试创建一个键盘，该键盘可以使用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

但是，我发现键盘向下滑动时，有些东西不正确。 我的键盘会先消失，背景会变成白色，然后才会发生向下滑动的动画。 我必须更改什么才能使键盘向下滑动时不会消失？

Answer 1

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

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

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

Answer 2

请在这里看我的小提琴。

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

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

Answer 3

您可以调整数字键盘元素的高度，而不是隐藏其内容，这样您的键盘将可以平滑地滑入和滑出。 如果您计划在不进行太多高度调整的情况下使边框完全可见，那么您还想将“屏幕”的框大小设置为border-box：

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

这是固定的小提琴