如何使用jquery脚本使幻灯片默认打开？

Question

我在堆栈溢出上找到了这个脚本，并且真的帮助了我。我已经尝试使其默认打开(默认幻灯片向上)，而不消除下滑。但我没有成功。有人能帮我改正吗？非常感谢。

​

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

.foot {
  border-top: 1px solid #999999;
  position: fixed;
  width: 600px;
  z-index: 10000;
  text-align: center;
  height: 300px;
  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: -275px;
}

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

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

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

​

Answer 1

您可以简单地将类slide-up添加到<div class="foot">中，如下所示：

<div class="foot slide-up">

或者您也可以使用jQuery在页面加载时这样做：

$('.foot').addClass('slide-up');

这里是代码：

​

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

.foot {
    border-top: 1px solid #999999;
    position:fixed;
    width: 600px;
    z-index: 10000;
    text-align:center;
    height: 300px;
    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: -275px;
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foot slide-up">
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>

​