jQuery の animate 関数で easeInSine を使用すると、うまくいかないことに気付きました。他のすべてのイージング オプションのように一貫性がない理由が気になります。
これが私が話していることを示す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>
ジャバスクリプト
$('.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;
}