javascript - 在 JS 命令上从顶部滑动模态

Question

我的问题的起点，this Codepen

我一直在寻找一种方法来获取由 JS 调用触发的页面上的幻灯片。环顾四周，上面的笔似乎是我要找的东西，但动画是由复选框触发的，而不是 JS 函数。

我的一个选择是使按钮不可见并像这样使用 jQuery 触发检查

$("#toggle")[0].checked = !($("#toggle")[0].checked)

虽然这条线有效，但我想在这里找到更多的 JS/jQuery 动画解决方案，如果这有意义的话。

Answer 1

隐藏检查和触发复选框的选项将起作用......您可以做的另一件事是添加 - 删除类名，但您需要更改 CSS。

如果你只想要简单的 Jquery，你可以使用 slideUp/Down ...

$('.container').click(function(){
  $('.message').slideToggle(500)
})

* {
  margin:0;
  padding:0;
}
.container {
  padding:50px;
}
h1 {
  font-size:40px;
  font-weight:bold;
  color:#191919;
}

h2 {
  font-weight:normal;
  font-size:20px;
  color:#888;
  padding:5px 0;
}

.message {
background:#181818;
color:#FFF;
height: 150px;
padding: 20px;
  display:none;
}

.message h1 {
  color:#FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="message">
  <h1> hello, I'm a hidden message. You found it.</h1>
</div>
<div class="container">
  <h1>Jquery Slide Down Toggle Demo</h1>
  <h2> Click here to Toggle the hidden mesage.</h2>
</div>