Question

我正在使用greensock库来动画一些元素，然后将动画恢复到旧位置。在我进行恢复之后，我的元素不会返回旧位置。

以下是我的代码：

＆＃13;

$(function() {
  tweenObject();

  function tweenObject() {
    var line = new TimelineLite({paused:true});
    line.add(TweenLite.to($("#bar"), 1, {
      x: 300,
      y: 100
    }));
    line.add(TweenLite.to($("#html"), 1, {
      x: -300,
      y: 100
    }));
     line.add(TweenLite.to($("#bar"), 1, {
      x: -300,
      y: -100
    }));
    line.add(TweenLite.to($("#html"), 1, {
      x: 300,
      y: -100
    }));
$("#play").click(function(){
  line.play();
})
    $("#pause").click(function(){
  line.pause();
})
  
  }

  
})

＆＃13;

div{
  width: 50%;
  float: left;
}
img{
  width: 400px;
}

＆＃13;

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineLite.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>

<div id="firstDiv">
<img src="https://greensock.com/wp-content/uploads/2014/04/robust.png" id="bar"/>
</div>
<div id="secondDiv">
<img src="https://greensock.com/wp-content/uploads/2014/04/compatible.png" id="html"/>
  <p id="myText"> this is any text here</p>
</div>  


<input type="button" id="play" value="play" />
<input type="button" id="pause" value="pause" />

＆＃13;

在我的示例中点击播放时，它应该重新定位2个图像，然后将它们放回原来的位置，这不会发生在这里。

知道可能出现什么问题吗？

Greensock没有将元素放回原位

0 个答案: