广告合作QQ：76874919

jquery滑动侧栏从左到右

HTML 2019-08-18

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

> 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的

SEOver(function() {
            $("#slide").css("left","0px");
        });

        $('#slide').mouSEOut(function() {
            $("#slide").css("left","-150px");
        });

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

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

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

DEMO

html

相关文章

elasticsearch扩展ik分词器词库
操作步骤 1、进入elasticsearch的plugin，进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
echarts中legend如何换行
lengend data数据中若存在''，则表示换行，用''切割。
Echart常用效果（一）
代码实现 option = { backgroundColor: '#080b30', tooltip: { trigger: &...
freemarker中js里面取字符串，换行导致报错的解决办法
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
Freemarker + xml 实现Java导出word
前言 最近做了一个调查问卷导出的功能，需求是将维护的题目，答案，导出成word，参考了几种方案之后，选...
【前端HTML】常用特殊字符编码对照表以及其对应英文
对于很多人来说，用字符编码都是熟能生巧，而不清楚为什么是那样的字符编码，所以我在这列了一个表，翻...