在javaScript中重置y元素的位置

我有一个通过点击按钮向上补间的画布。我试图在补间结束后让它回落，但它只是没有用。它开始在屏幕的顶部罚款。第一次点击按钮时，它会下降到400，然后滑动到200.但在下一次点击 - 它会继续飞起来，而不是先回到400。请帮忙！ :)在javaScript中重置y元素的位置

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <script src= 
    "http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 
</head> 

<body> 
    <button onclick="func();">click</button> <canvas height="100" id="canvas" 
    style="position:absolute; top:50px; border:3px solid #000000;" width= 
    "200"></canvas> 
    <script> 
      var c = document.getElementById("canvas"); 
      function func(){    
       c.style.top = 400 + "px"; 
       TweenMax.to(c,2,{y: "-=200", onComplete:foo}); 
      } 
      function foo(){ 
       c.style.top = "400px"; 
      } 
    </script> 
</body> 
</html>

来源

2013-08-25 user2714195