带有 gsap 动画的 jQuery 切换答案

【问题标题】：jQuery toggle with gsap animation带有 gsap 动画的 jQuery 切换
【发布时间】：2013-08-09 07:40:50
【问题描述】：

我想切换一个 div，将高度从 10 像素添加到 200 像素。我的问题是，如果我再次单击，它将动画从 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});
});

【问题讨论】：

标签： javascript jquery css animation gsap

【解决方案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;
});

【讨论】：

【解决方案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});
   }

});

【讨论】：