在反转之后清除GSAP TimelineMax动画

Question

基本上我有这样的结构，我的目标是为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（）;”如果我输入“TL.clear（）;”它将仅用于第一个“.quater”div点击。动画不再反转。

Answer 1

<强> jsFiddle

<强> 段：

＆＃13;

＆＃13;

var container = document.querySelector('.container');
var items = document.querySelectorAll('.item');
var duration = 0.6;
var ease = Expo.easeOut;
var numItems = items.length;
var i;

container.addEventListener('click', onContainerClicked, false);

for (i = 0; i < numItems; i += 1) {
    (function(index){
        items[index].timeline = new TimelineMax({ paused: true });
        items[index].timeline.fromTo(items[index], duration, { y: 0, autoAlpha: 0.4 }, { y: -104, autoAlpha: 1, ease: ease });
        items[index].addEventListener('click', onItemClicked, false);
    }(i));
}

function onContainerClicked() { reverseAll(); }

function onItemClicked(e) {
    reverseAll();
    e.target.timeline.play();
}

function reverseAll() {
    for (i = 0; i < numItems; i += 1) { items[i].timeline.reverse(); }
}

＆＃13;

html, body {
    margin: 0;
    padding: 0;
}

.container {
    background: #444;
    width: 512px;
    height: 104px;
}

.item {
    float: left;
    margin: 2px 0 0 2px;
    width: 100px;
    height: 100px;
}

.item:nth-child(odd) { background: #0cc; }
.item:nth-child(even) { background: #cc0; }

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<div class="container"></div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>
<div class="item">&nbsp;</div>

＆＃13;

＆＃13;

＆＃13;