Jquery幻灯片从页面底部向上移动 [英] Jquery slide div up from bottom of page

问题描述

到目前为止，我有一个div固定在页面的底部，底部边距设置为一个减号，以便隐藏它的大部分在屏幕下方。我想创建一个Jquery按钮，使其所有滑动到页面上，但我迄今为止所做的一切都没有工作。

So far, I have a div fixed to the bottom of the page, with the bottom margin set to a minus number, so as to hide most of it below the screen. I'd like to create a Jquery button that made it all slide up onto the page, but everything I have tried so far hasn't worked. I'm not so experienced with it, so I've probably been doing it worng.

无论如何，这里是我的CSS：

Anyway, here's my 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滑出页面：

Code I already tried. It just made the div slide down off the page:

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

推荐答案

What if you had another class:

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

Make sure you have jQuery UI imported first.

更新了 JSFiddle

这篇关于Jquery幻灯片从页面底部向上移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！