时间戳

首页 > 解决方案 > 点击按钮滑动div

jquery - 点击按钮滑动div

问题描述

我有这个代码，但我被卡住了。我需要在页面打开时将其关闭，然后在单击按钮时向下滑动。有什么帮助吗？

代码：http: //jsfiddle.net/9cdYR/

$('#slide_button').click(function() {
  $('#slide').animate({
    height: 'toggle'
  }, 1500, function() {});
});
#content {
  background-color: #c0c0c0;
  border: 1px solid blue;
}

#slide {
  border: 1px solid red;
  background-color: #000;
  color: #fff;
  overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slide">
  Slide content<br /> Slide content<br /> Slide content<br />
</div>
<div id="content">
  Content<br /> Content
  <br /> Content
  <br />
</div>

<button id="slide_button">Slide it</button>

标签： jqueryjquery-animate

解决方案

如果您想实现此行为，请将您的 jquery 代码更改为

$('#slide_button').click(function() {
  $('#slide').animate({
    height: 'show'
  }, 1500, function() {
  });
});
$('#slide').animate({
  height: 'hide'
}, 0, function() {
});

但是，如果您希望按钮在每次单击时仍然切换，请将 height 属性更改为“切换”

推荐阅读