使用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作爲包含播放操作的兩個函數。