jQuery动画立即启动而不会放松

Question

When using the following Jquery example in Chrome, the easing at the mouseenter event pauses the animation for a few moments. Is it possible to have the animation start immediately?

The desired effect is when mouseenter, move css left: -150 - 0; when 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

You have the delay set to 1 second.

Lowering the ms to 100 will resolve this for you.

$(document).ready(function () {

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

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

})