javascript - 使用 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什么）。