Javascript 反转GSAP TimelineMax动画后清除该动画

基本上我有一个这样的结构，我的目标是设置4个div的动画，这样当你点击其中一个时，另一个就会滑出，当你点击容器时，它们会回到初始位置

var TL = new TimelineMax;
$('.quater').on('click', function () {
    $faders = $('.container').find('.quater').not(this),
    $faders.each(function () {
        TL.to($(this), 1, {autoAlpha:0, x:50}, 0);
    });
});

$('.container').on('click', function () {
    TL.reverse();
    TL.clear();
});

问题是，如果我省略“TL.clear（）；”，它将只适用于单击的第一个“.quater”div，如果我输入“TL.clear（）；”，动画将不再反转。

片段：

var container=document.querySelector（'.container'）；
var items=document.querySelectorAll（'.item'）；
风险值持续时间=0.6；
var ease=Expo.easeOut；
var numItems=items.length；
var i；
container.addEventListener（'click'，onContainerClicked，false）；
对于（i=0；i

html，正文{
保证金：0；
填充：0；
}
.集装箱{
背景：#444；
宽度：512px；
高度：104px；
}
.项目{
浮动：左；
保证金：2px 0 0 2px；
宽度：100px；
高度：100px；
}
.项目：第n个孩子（奇数）{背景：#0cc；}
.item:n个孩子（偶数）{背景：#cc0；}

有演示给我们吗？使用if语句在两者之间切换可能更好。这是一个很好的建议，我只需在两个单独的动画中使用自定义JQuery切换函数进行切换：应用于容器，它就像一个符咒一样工作！！谢谢