When utilizing the given Jquery example in Chrome, the easing effect during the mouseenter event causes a brief pause in the animation. Is there a way to trigger the animation to start immediately?
The intended outcome is for the animation to shift move css left: -150 - 0; upon mouseenter, and to transition from the current position to -150 upon 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;
}