Why does jQuery's easeInSine not end at the right value?

Question

I've noticed that when you use easeInSine with jQuery's animate function, it doesn't get the job done. I'm just curious as for why it isn't consistent like every other easing option.

Here's a jsFiddle demonstrating what I'm talking about: http://jsfiddle.net/aleclarsoniv/mVaZ8/1/embedded/result/

And here's the code: 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 is not jQuery's strongest part.

Try using GSAP (TweenLite JS) https://www.greensock.com/gsap-js/

It's 20x faster than jQuery and more accurate.

Hope that helps.