Geek asks and answers

Jquery sliding sidebar left to right

I am trying to create a sliding sidebar with effects similar

This is how I wrote the code. But it is jerky.

  • Can anyone suggest a better solution using aniamtions / easing / toggle etc.
  • I want the code not to depend on the left parameter ie $ ("# slide"). css ("left", "-150px"); It should be able to slide / extend with all kinds of width div

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>
+5
source share
1 answer

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);     
});

.stop() . , - .

DEMO

+10

More articles:


All Articles