[英]jQuery toggle with gsap animation
我想切换一个将高度从10像素增加到200像素的div。我的问题是,如果我再次单击它将从200像素恢复为10像素。 而且我不知道该怎么办。
这是我的代码。
的CSS
.container2 {
width: 100%;
height: 10px;
border: 1px;
}
.container .box {
padding: 10px;
margin: 10px;
background: blue;
display: none;
}
HTML
<div class="container2">
<div class="box bounceIn"></div>
</div>
JavaScript
var con = $('.container2');
var box = $('.box');
var click = $('.click');
click.click( function() {
TweenMax.to(con, 1, {height: '200px', ease:Bounce.easeOut});
});
此代码将在两种状态之间来回切换。
var clicked = false;
click.click(function() {
if(clicked){
TweenMax.to(con, 1, {height: '10', ease:Bounce.easeOut});
}else{
TweenMax.to(con, 1, {height: '200', ease:Bounce.easeOut});
}
clicked = !clicked;
});
var clicked = false;
click.click( function() {
if(clicked == false){
TweenMax.to(con, 1, {height: '200px', ease:Bounce.easeOut});
}else{
TweenMax.to(con, 1, {height: '10px', ease:Bounce.easeOut});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.