我的问题的起点this Codepen
我一直在寻找一种方法来获取由JS调用触发的页面上的幻灯片。环顾四周,上面的笔似乎是我正在寻找的,但不是JS功能,动画由复选框触发。
我的一个选择是让按钮不可见并使用jQuery触发检查
$("#toggle")[0].checked = !($("#toggle")[0].checked)
虽然这行有效,但我想在这里找到更多JS / jQuery动画解决方案,如果这是有道理的。
答案 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>