Question

到目前为止，我有一个div固定在页面底部，底部边距设置为负数，以便将大部分内容隐藏在屏幕下方。我想创建一个Jquery按钮，使它全部滑到页面上，但到目前为止我尝试过的所有东西都没有用。我对此并不那么有经验，所以我可能已经做到了。

无论如何，这是我的CSS：

.foot {
    border-top: 1px solid #999999;
    position:fixed;
    width: 600px;
    z-index: 10000;
    text-align:center;
    height: 500px;
    font-size:18px;
    color: #000;
    background: #FFF;
    display: flex;
    justify-content: center; /* align horizontal */
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    bottom: -475px;
}

我的HTML：

<div class="foot">
Copyright 2014 &copy; Tom Gibbs web design. <div class="clocker">hi</div>
<br />
<br />
Line 1<br />
Line 2<br />
Line 3<br />
Line 4
</div>

代码我已经尝试过了。它只是让div滑下页面：

<script>
$(document).ready(function(){
  $(".clocker").click(function(){
    $(".foot").slideUp(2000);
  });
});
</script>

Answer 1

如果您有其他课程怎么办？

.slide-up
{
    bottom: 0px !important;
}

.slide-down
{
    bottom: -475px !important;
}

您可以点击添加：

$(document).ready(function() {
  $('.foot').click(function() {
      if($('.foot').hasClass('slide-up')) {
        $('.foot').addClass('slide-down', 1000, 'easeOutBounce');
        $('.foot').removeClass('slide-up'); 
      } else {
        $('.foot').removeClass('slide-down');
        $('.foot').addClass('slide-up', 1000, 'easeOutBounce'); 
      }
  });
});

确保首先导入jQuery UI。

更新了JSFiddle

Answer 2

我相信这是你想要的：DEMO

$(document).ready(function(){
  $(".clocker").click(function(){
      $(".foot").animate({bottom:'300px'},1000);
  });
});

我的Css也做了一些改动：

.foot {
    border-top: 1px solid #999999;
    position:fixed;
    width: 600px;
    z-index: 10000;
    text-align:center;
    /*height: 500px;*/
    font-size:18px;
    color: #000;
    background: #FFF;
    display: flex;
    justify-content: center; /* align horizontal */
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    bottom: 0;
}

更新

如果您想关闭 See Updated DEMO

$(document).ready(function(){
  $(".clocker").click(function(){
      if($(".foot").css('bottom') == '0px'){
          $(".foot").animate({bottom:'300px'},1000);
      }
      else
      {
          $(".foot").animate({bottom:'0px'},1000);
      }

  });
});

Answer 3

Tris为我工作（在你的代码编辑器中腼腆地粘贴）：

<!DOCTYPE html>
        <html>
        <head>
            <title>Slide Up</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        </head>

        <style type="text/css">
            .container {
                position: absolute;
                top:0px;
                left:0px;
                bottom:0px;
                right:0px;
                width:80%;
                height:600px;
                border:1px solid black;
                margin:auto;
            }

            .menuB{
                position:absolute;
                width:100%;
                height:0;
                left:0;
                bottom:0;
                /*transform-origin:100% 100%;*/
                background:#2196F3;
                opacity:0;
                overflow:hidden;
            }

            .clickMe{
                position: absolute;
                margin-top: 0;
                right: 0;
                width: 100%;
                height: 30px;
                background-color: #2196F3;
                color: white;
                text-align: center;
                cursor: pointer;
            }
        </style>
        <body>

            <div class="container">
                <div class="menuB">

                </div>

                <p class="clickMe">Click</p>
            </div>

            <script type="text/javascript">
                    var opacity_status = false;
                $('.clickMe').on('click', function () {
                    // body...
                    if (opacity_status === false) {
                        $('.menuB')
                           .animate({
                               opacity: 1
                           }, 100)
                           .animate({
                               height: '250px'
                           }, 1500 );
                        opacity_status = true;
                    }else{
                        $('.menuB')
                           .animate({
                              height : 0
                           }, 1500)
                           .animate({
                               opacity: 0
                           }, 2000 );
                        opacity_status = false;
                    }

                });
            </script>

        </body>
        </html>

Answer 4

可能有点晚了，但我希望它会对其他人有所帮助。我是通过fluke完全发现了这一发现，因此我对此不承担任何责任，也不太了解。也许是一个错误。

我能够使用slideDown()方法并通过将CSS绝对top / bottom属性更改为top: 0;或bottom: 0;来简单地更改上下文菜单的滑动方向，具体取决于：我想走哪条路。

还有一个js小提琴：Slide up or down polarity

$('.option').click(function(evObject) {

  $("#contextContainer").slideDown(2500);
});

#contextContainer {
  display: none;
  background-color: green;
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 10;
  opacity: 90%;
  padding: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="controlContainer">
  <div class="option">Click me</div>
</div>

<div id="contextContainer">Context menu!!</div>

Jquery幻灯片从页面底部开始

4 个答案:

更新