我注意到，当您将 easeInSine 与 jQuery 的 animate 函数一起使用时，它并没有完成工作。我只是好奇为什么它不像其他所有宽松选项一样一致。
这是一个 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;
}