使用GreenSock - 一个对象

Question

上多，随之而来的充斥着我的动画一个div的位置，然后再返回到它的起源有不同的轻松：

var anim_a = new TimelineMax().to($(".mybox"), 3, {x: 400}).stop(); 
var anim_b = new TimelineMax().to($(".mybox"), 1, {x: 0, ease:Bounce.easeOut}).stop(); 

问题是后两者的动画跑了一次，他们不会再运行，为什么？以及如何根据需求重复它们？

JSFIDDLE

Answer 1

var anim_a = function() { 
 
    var anm = new TimelineMax().to($(".mybox"), 1, { 
 
    x: 400 
 
    }).stop(); 
 
    anm.play(); 
 
} 
 
var anim_b = function() { 
 
    var anm = new TimelineMax().to($(".mybox"), 1, { 
 
    x: 0, 
 
    ease: Bounce.easeOut 
 
    }).stop(); 
 
    anm.play(); 
 
} 
 

 
$(".run-a").click(function(e) { 
 
    anim_a(); 
 
}); 
 

 
$(".run-b").click(function(e) { 
 
    anim_b(); 
 
});

.run-a, 
 
.run-b { 
 
    background: green; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
} 
 

 
.mybox { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script> 
 

 
<div class="run-a">Go</div> 
 
<div class="run-b">Go back</div> 
 

 
<div class="mybox"></div>

我不习惯这种TimeLineMax。尽管如此，我仍然对代码做了一些小改动，现在它的工作方式如上所述。请检查并确认这是否适合您的情况。我只是将anim_a和anim_b作为包含播放操作的两个函数。