难倒高手的题目..-_-  jQuery animate 的暂停功能-_-

jQuery animate 的暂停功能-_-

一个动画..

比如        $("#d1").animate({left:1000},5000);

这个 如果在他运动的时候..我用了  stop() 方法 他就会停了.  就没办法再继续了..

大家有没有研究研究暂停功能......

用stop的时候能不能获得它的位置呢

获取了位置..那时间怎么算?.
时间就不能用以前的时间了...难到要用一个  date 吗

HTML:
<style type="text/css">
div.block {
    background-color: aqua;
    width: 50px;
    position: absolute;
    left: 100px;
    top: 100px;
}
</style>

<button id="go">Go</button>
<button id="stop">STOP!</button>
<button id="continue">CONTINUE!</button>
<div class="block">block!!!</div>
<script src="pause.js" type="text/javascript"></script>

JS:
//初始continue按钮和stop按钮置灰
$("#continue").attr("disabled", "disabled");
$("#stop").attr("disabled", "disabled");

$("#go").click(function(){
    //计算移动后的位置
      var totalLeft = $(".block").offset().left + 400;  
      //保存到$(".block")对象上
      $(".block").data("totalLeft", totalLeft);
      //移动初始剩余时间为2000
      $(".block").data("remainTime", 2000);
      //保存开始时间到$(".block")对象上
      $(".block").data("startTime", new Date().getTime());
      //开始动画,go按钮置灰
      $(this).attr("disabled", "disabled");
      //stop按钮开启
      $("#stop").attr("disabled", "");
      //执行动画,线性移动,2000ms完成
      $(".block").animate({left: ['+=400px', 'linear']}, 2000, function() {
          //动画结束后调用函数,go按钮开启,stop按钮置灰
          $("#go").attr("disabled", "");
          $("#stop").attr("disabled", "disabled");
      });
});

$("#stop").click(function(){
    //continue按钮开启,stop按钮置灰
      $("#continue").attr("disabled", "");
      $(this).attr("disabled", "disabled");
      //暂停动画
      $(".block").stop(false, false);
      //获取暂停时间
      var stopTime = new Date().getTime();
      //计算剩余时间
      var remainTime = $(".block").data("remainTime") - stopTime + $(".block").data("startTime");
      //重置剩余时间
      $(".block").data("remainTime", remainTime);
});

$("#continue").click(function() {
    //stop按钮开启,continue按钮置灰
      $("#stop").attr("disabled", "");
      $(this).attr("disabled", "disabled");
      //获取暂停时的横坐标
      var left = $(".block").offset().left;
      //计算剩余位移量
      var remainLeft = $(".block").data("totalLeft") - left;
      //计算剩余时间
      var remainTime = $(".block").data("remainTime");
      //继续动画
      $(".block").animate({left: ['+=' + remainLeft + 'px', 'linear']}, remainTime, function() {
          //动画结束后调用函数,go按钮开启,continue按钮stop按钮置灰
          $("#go").attr("disabled", "");
        $("#continue").attr("disabled", "disabled");
        $("#stop").attr("disabled", "disabled");
      });
      //重置开始时间
      $(".block").data("startTime", new Date().getTime());
});

才接触jQuery几天,也想过这个问题,傻瓜式的实现了下,貌似只适用于线性的效果,其他效果就不好看...
代码拙劣,仅供参考,望高手指点~

学习中...