jQuery的動畫立即開始不寬鬆

在使用Chrome的以下Jquery的例子，在mouseenter事件的寬鬆停頓了片刻動畫。是否有可能立即開始動畫？jQuery的動畫立即開始不寬鬆

所需的效果是當的mouseenter，move css left: -150 - 0; 當鼠標離開，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

來源

2013-08-31 goingsideways

使用100或更少的不是1000 – PiLHA

此外，你應該做的動畫之外的比較，再見。 –

$（文件）。就緒（函數（）{$ （「菜單項」）。在（ '的mouseenter鼠標離開'，函數（E）{ $（「滑塊」）。停止（）。動畫（{左：e.type == 「的mouseenter」 0：-155}，0000）; }）;} ） – ThaDick

您將延遲設置爲1秒。

將ms降至100將爲您解決此問題。

$（文件）。就緒（函數（）{

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

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

}）

來源

2013-08-31 02:48:40

這使得延遲更低，但現在在其他瀏覽器是太快了？實際上是 – goingsideways

。發現我的CSS課程已經過渡：1s – goingsideways

jQuery的動畫立即開始不寬鬆

回答

相關問題