Javascript 交换类不'；无法清除以前的tween值

我正在制作某种动画，所以我准备了一个与任务完全相关的演示。我在第一个时间线完成后对类进行交互更改，并在用户第二次单击时运行另一个时间线。问题是，当播放第二个时间线时，tween将先前的tween值添加到我在第二次单击时正在tween的元素中。如果您看下面的示例，当运行第二个时间轴（即home_slide_2）时，block_1元素从上一个tween中获取x值，使动画同时具有x和y值。谁能告诉我我做错了什么

$（'.arrow'）。在（“单击”，函数（）上）{
var id=$（this.data（'id'）；
如果（id=“幻灯片1”）{
//第一张幻灯片的过渡
var home_slide_1=新的TimelineMax（{暂停：（true），onComplete:reset}）
.to（“.block_1”，1.5，{y:30，ease:Power4.easeOut}，“s”）
.to（“.block_2”，1.5，{x:30，ease:Power4.easeOut}，s”）；
函数重置（）{
$（.block_1”）.addClass（'block_2'）.removeClass（'block_1'）.removeAttr（“样式”）；
$（.av2”）.addClass（'block_1'）.removeClass（'block_2'）.removeAttr（“样式”）；
};       
主页\幻灯片\ 1.播放（）；
$（此）.data（'id'，'slide_2'）；
}
否则如果（id=“幻灯片2”）{
//第二张幻灯片的过渡
var home_slide_2=新的TimelineMax（{暂停：（true）}）
.to（“.block_1”，1.5，{y:30，ease:Power4.easeOut}）；
主页\幻灯片\ 2.播放（）；
}
});
.arrow{
浮动：对；
宽度：50px；
高度：50px；
背景：红色；
光标：指针
}
.ar1{
浮动：对；
宽度：50px；
高度：50px；
背景：黑色；
光标：指针
}
.第1区{
背景：绿色；
浮动：左；
宽度：100px；
高度：100px；
}
.第2区{
背景：蓝色；
浮动：左；
宽度：100px；
高度：100px；
}
您可以使用clearProps清除中间值

else if(id == "slide_2"){

   //clearing the tween values in block_1
   TweenMax.set(".block_1", {clearProps:"all"}); 

   // transition of second slide
   var home_slide_2 = new TimelineMax({paused:(true)})
   .to(".block_1", 1.5, {y: 30,ease:Power4.easeOut});

   home_slide_2.play();      
 }