为什么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倍速度更快，更准确。

希望有所帮助。