jQuery滑动侧边栏从左到右

Question

我正在尝试创建一个带有类似于www.wookmark.com和http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm的效果的侧边栏。这是我编写的代码，但它很卡顿。有人能提出更好的解决方案，包括动画/缓动/切换等吗？我希望代码不依赖于左参数，即$("#slide").css("left", "-150px")，它应该能够滑入/滑出所有类型的div宽度。有任何想法吗？

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>

- django

Answer 1

你需要使用animate()方法 -

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

在此之前我添加了 .stop()。这将清除因快速移动鼠标而建立的动画队列。

演示

- SachinGutte

---

谢谢@phobos。它的工作方式就像我想要的那样。 但是，如果我快速多次悬停在滑块div上，它会变得疯狂。 我们有办法解决这个问题吗？ - django