0

次の Jquery の例を Chrome で使用すると、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

4

1 に答える 1