在JS命令中从顶部滑动模态

时间:2016-06-10 17:22:04

标签: javascript jquery html css css-animations

我的问题的起点this Codepen

我一直在寻找一种方法来获取由JS调用触发的页面上的幻灯片。环顾四周,上面的笔似乎是我正在寻找的,但不是JS功能,动画由复选框触发。

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

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

虽然这行有效,但我想在这里找到更多JS / jQuery动画解决方案,如果这是有道理的。

1 个答案:

答案 0 :(得分: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>