jquery滑动侧栏从左到右

发布时间：2020-12-14 23:06:41 所属栏目：资源来源：网络整理

导读：我正在尝试创建一个具有类似效果的滑动侧栏 www.wookmark.com http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm. 这是我写代码的距离.但这是生涩的. 任何人都可以提出更好的解决方案与aniamtions / easing / toggle等我希望代码独立于左参数,即$

我正在尝试创建一个具有类似效果的滑动侧栏

> www.wookmark.com
> http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm.

这是我写代码的距离.但这是生涩的.

>任何人都可以提出更好的解决方案与aniamtions / easing / toggle等
>我希望代码独立于左参数,即$(“#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


jQuery的


最佳答案
你需要animate()方法 – 

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

在这里,我之前添加了.stop().这将清除由于快速移动鼠标而构建的动画队列.
DEMO
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!