動畫使用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或其他）。