i want to toggle a div that add the height from 10px to 200px.. my problem is if i click again it will animate back from 200px to 10px. and i dont know what to do.
heres my code.
the css
.container2 {
width: 100%;
height: 10px;
border: 1px;
}
.container .box {
padding: 10px;
margin: 10px;
background: blue;
display: none;
}
the html
<div class="container2">
<div class="box bounceIn"></div>
</div>
the javascript
var con = $('.container2');
var box = $('.box');
var click = $('.click');
click.click( function() {
TweenMax.to(con, 1, {height: '200px', ease:Bounce.easeOut});
});
This code will toggle back and forth between the two states.
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});
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.