动画使用JSTween的冒泡问题

Question

我对js的东西有点新，但是我有一个让我发疯的问题。 我用jstween创建了一个简单的动画。我的问题是，当我点击开始动画的按钮时，动画效果很好。如果你继续按下按钮，虽然它重新启动动画，这就是我想要阻止的。

我试过stop()和stop(true)但它没有工作。这里是我下面的代码：

$('.mybtn1').click(function(){ 

    $('.box1').tween({ 
    left:{ 
     start: 0, 
     stop: 400, 
     time: 0, 
     duration: 1, 
     units: 'px', 
     effect: 'easeInOut', 

    } 
    }); 

    $.play(); 
}) 

Answer 1

你正在传递的每一个功能运行时0一个静态值。如果元素已经移动，那么在开始补间之前它会跳回到left: 0。

尝试传递当前左偏移量时运行该函数。

$(".mybtn1").click(function(){ 

    el = $('.box1'); 

    el.tween({ 
     left:{ 
      start: function() { return el.offset.left; }, 
      stop: 400, 
      time: 0, 
      duration: 1, 
      units: 'px', 
      effect: 'easeInOut', 
     } 
    }); 

    $.play(); 
}); 

您可能需要弄乱这里的语法。我不确定offset.left是否会返回您需要的值（可能是el.style.left或其他）。