使用 JSTween 的动画冒泡问题

【问题标题】：Animation Bubbling issue using JSTween使用 JSTween 的动画冒泡问题
【发布时间】：2012-07-27 15:09:58
【问题描述】：

我对 js 的东西有点陌生，但我遇到了一个让我发疯的问题。我使用 jstween 创建了一个简单的动画。我的问题是当我单击启动动画的按钮时，动画效果很好。如果您继续按下按钮，尽管它会重新启动动画，这就是我想要阻止的。

我尝试了stop() 和stop(true)，但没有成功。下面是我的代码：

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

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

    }
    });

    $.play();
})

【问题讨论】：

标签： javascript jstween

【解决方案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 或其他）。

【讨论】：