logo标签列表

jQuery如何使一个div从页面底部向上滑动？

jqueryhtmlcss
6
到目前为止，我已经将一个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>
2
Jquery代码在哪里？ - Manwal
就像我说的那样，我找不到任何接近的东西，但我在编辑中添加了我已经尝试过的代码。 - MyNameWouldGoHere
到目前为止，那是我唯一尝试过的Jquery。其余的都是CSS技巧，虽然能用，但效果不太好。我宁愿使用Jquery。 - MyNameWouldGoHere
@user3779981，与其向上滑动以显示页脚内的其余内容，不如使用单独的容器/模态框向上滑动会更好。这样，您可以保持页脚不变，并根据需要向上滑动其他容器/模态框。 - srikarg
现在我正在使用addClass函数来添加一个类，以便在单击时删除底部边距。虽然它可以工作，但我无法将其恢复为原来的状态。 - MyNameWouldGoHere
4个回答
13

如果你有另一个班:

.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

这个确实很有效，谢谢。如果用户再次点击，让它下去会难吗？ - MyNameWouldGoHere
@user3779981 好的，已修复。此外，您可以尝试使用jQuery UI的不同缓动类型，而不仅仅是弹跳效果。 - Senju
我真的很喜欢弹跳效果。我以前从未使用过这些Jquery UI效果，但现在我一定会用！ - MyNameWouldGoHere
更短和 $(function() { $('#dev-module-toolbar').click(function() { if($(this).hasClass('slide-up')) { $(this).toggleClass('slide-down', 'slide-up'); } else { $(this).toggleClass('slide-up', 'slide-down'); } }); }); - ymakux
5

我相信这是您想要的东西：演示

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

更新

如果你想关闭它，也可以查看更新后的演示

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

  });
});
你的原始演示需要在HTML中加入一个<button class='clocker'>Click</button>按钮 ;) - brandonscript
0

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

可能有点晚了，但我希望它能帮助其他人。 我完全是偶然发现这个的，所以我不会为此而得到任何荣誉，也不太理解它。也许这是一个错误。

我能够使用 slideDown() 方法并通过更改 css 绝对 top/bottom 属性来改变我的上下文菜单滑动的方向：top: 0; 或 bottom: 0;，具体取决于我想要去哪个方向。

还有一个 jsfiddle：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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接