爲什麼jQuery的easeInSine沒有以正確的值結束？

Question

我注意到，當你使用easeInSine和jQuery的動畫函數時，它不會完成任務。我只是好奇，爲什麼它不像其他每個放鬆選項一樣。

這裏是一個展示的jsfiddle什麼我談論：http://jsfiddle.net/aleclarsoniv/mVaZ8/1/embedded/result/

而這裏的代碼：http://jsfiddle.net/aleclarsoniv/mVaZ8/1/

HTML

Ease Out Sine 
<div class='container' data-easing='easeOutSine'> 
    <div class='box'></div> 
</div> 
Ease In Sine 
<div class='container' data-easing='easeInSine'> 
    <div class='box'></div> 
</div> 

JAVASCRIPT

$('.box').each(function() { 
    $(this).html($(this).css('margin-left')); 
}); 

$('.container').mouseenter(function() { 
    $('.box', this).stop().animate({ 
     'margin-left': -50 
    }, { 
     queue: 'margin', 
     step: function (now) { 
      $(this).html(now); 
     }, 
     easing: $(this).data('easing'), 
     duration: 400 
    }).dequeue('margin'); 
}).mouseleave(function() { 
    $('.box', this).stop().animate({ 
     'margin-left': 0 
    }, { 
     queue: 'margin', 
     step: function (now) { 
      $(this).html(now); 
     }, 
     easing: $(this).data('easing'), 
     duration: 200 
    }).dequeue('margin'); 
}); 

CSS

.box { 
    position:relative; 
    background-color:black; 
    margin-left:0; 
    width:240px; 
    height:26px; 
    color:white; 
    font-weight:300; 
    padding: 4px 0 0 10px; 
} 
.container { 
    position:relative; 
    border:1px solid black; 
    padding:10px; 
    width:250px; 
    height:30px; 
    margin-bottom:10px; 
    margin-left:50px; 
}  
body { 
    font-family:Arial; 
} 

Answer 1

.animate不是jQuery的最強的部分。

嘗試使用GSAP（TweenLite的JS）https://www.greensock.com/gsap-js/

它比jQuery的20倍速度更快，更準確。

希望有所幫助。