jquery - jQuery Animation 立即启动，无需缓动

Question

在 Chrome 中使用以下 Jquery 示例时，mouseenter事件的缓动会使动画暂停片刻。是否可以立即开始动画？

想要的效果是当mouseenter，move css left: -150 - 0; 当mouseleave，move css left:(current position) to -150)

jQuery

$(document).ready(function () {     
    $(".menuitem").on('mouseenter mouseleave', function( e ) {      
        $(".slider").stop().animate({left: e.type=="mouseenter"?0:-155}, 1000);   
    });
 })

html

<div class='menuitem'>
    Test Menu Item
    <div class='slider'>Message about Item</div>
</div>    

css

.slider {
    color: #FFF;
    position: absolute;
    left: -155px;
    width: 155px;
    top: 0px;
    height: 52px;
    transition: 1s;
    z-index: 10;
    border: 1px solid #bb0000;
    background: #bb0000;
    text-align: center;
}
.menuitem {
    float: left;
    overflow: hidden;
    position: relative;
    width: 155px;
    height: 52px;
    line-height: 52px;
    margin-left: 5px;
    line-height: 52px;
    background: #EEE;
    text-align: center;
}

JSFiddle

Answer 1

您将延迟设置为 1 秒。

将 ms 降低到 100 将为您解决此问题。

$(文档).ready(函数 () {

$(".menuitem").on('mouseenter mouseleave', function( e ) {
    // Find Slide element.

    $(".slider").stop().animate({left: e.type=="mouseenter"?0:-155}, 100);   
});

})