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将为您解决此问题。

$（document）.ready（function（）{

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

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

}）

jQuery动画立即开始，没有缓和

1 个答案: