jQuery使用gsap動畫切換

Question

我想切換一個將高度從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});
});

Answer 1

此代碼將在兩種狀態之間來回切換。

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;
});

Answer 2

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});
   }

});