js进阶 13-8 jquery如何实现侧边栏

一、总结

一句话总结:先是把侧边栏设置为left为-100px,隐藏起来,jquery自定义动画animate里面的改变元素的距左边的宽度left,slide系列动画是改变元素的高;$(this).animate({left:'0px'});$(this).animate({left:'-100px'});

二、如何实现侧边栏

1、相关知识

侧边栏

案例描述:具有滑动隐藏显示效果的侧边栏。

js进阶 13-8 jquery如何实现侧边栏-LMLPHP

2、代码

 <!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
.nav{
width: 100px;height: 300px;border-radius: 0 15px 15px 0;background: #eee;position: absolute; top: 50px;left: -100px;
}
.nav span{display: block; background: orange;width: 30px;height: 90px;border-radius: 0 4px 4px 0;font-size: 20px;line-height: 30px;position: relative;left: 100px;top:100px;}
</style>
</head>
<body>
<div class="nav">
<span>分享到</span>
<ul>
<li>QQ</li>
<li>微信</li>
<li>微博</li>
<li>......</li>
</ul>
</div>
<script>
$('.nav').mouseenter(function(){
$(this).animate({left:'0px'})
})
$('.nav').mouseleave(function(){
$(this).animate({left:'-100px'})
})
</script>
</body>
</html>
 
05-11 13:00