jquery滑动侧栏从左到右

时间:2013-04-01 14:24:20

标签: jquery html sidebar slidetoggle

我正在尝试创建一个类似于

的滑动侧栏
  1. www.wookmark.com
  2. http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm
  3. 这是我写代码的距离。但这是生涩的。

    1. 任何人都可以提出更好的解决方案,包括aniamtions / easing / toggle等
    2. 我希望代码独立于左参数,即$(“#slide”)。css(“left”,“ - 150px”); 它应该能够以各种div宽度滑入/滑出
    3. 有什么想法吗?

      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>
      

1 个答案:

答案 0 :(得分:10)

您需要animate()方法 -

var width = $('#slide').width() - 10;
$('#slide').hover(function () {
     $(this).stop().animate({left:"0px"},500);     
   },function () {          
     $(this).stop().animate({left: - width  },500);     
});

我之前添加了.stop()。这将清除由于快速移动鼠标而构建的动画队列。

<强> DEMO