jquery滑动侧边栏从左到右

Posted 2023-02-25

【中文标题】jquery滑动侧边栏从左到右

【英文标题】：jquery sliding side bar Left to right

【发布时间】：2013-04-01 14:24:20

【问题描述】：

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

的滑动侧边栏

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>

【参考方案1】：

你需要animate()方法-

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

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

DEMO

【讨论】：

谢谢@phobos。它按我的意愿工作。但是，如果我在滑块 div 上多次快速悬停鼠标，它就会发疯。无论如何我们可以解决这个问题？