I am trying to create a sliding side bar with effects similar to
This is how far I wrote the code.But this is jerky.
Any ideas ?
CSS
#slide{
border:1.5px solid black;
position:absolute;
top:0;
left:0;
width:150px;
height:100%;
background-color:#F2F2F2;
layer-background-color:#F2F2F2;
}
HTML
<div id="slide" style="left: -150px; top: 0px; width: 160px;">
<p>Something here</p>
</div>
Jquery
<script>
jQuery(document).ready(function() {
$('#slide').mouseover(function() {
$("#slide").css("left", "0px");
});
$('#slide').mouseout(function() {
$("#slide").css("left", "-150px");
});
});
</script>
You need animate() method -
var width = $('#slide').width() - 10;
$('#slide').hover(function () {
$(this).stop().animate({left:"0px"},500);
},function () {
$(this).stop().animate({left: - width },500);
});
Here I've added .stop()
before. This will clear animation queue that is built up because of moving mouse quickly.