使用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或其他值)。