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或其他内容）。

使用JSTween的动画冒泡问题

1 个答案: