摘要：本实例就用到JQ中一些常用的操作，stop\animate\hover\ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> &nbs
本实例就用到JQ中一些常用的操作，stop\animate\hover\
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>hi！我是左侧JQ导航</title>
<link rel="stylesheet" type="text/css" href="static/css/style3.css">
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<script src="static/js/jquery.js"></script>
<script>
$( function () {
//通过ID选取到侧边的li，动画向左侧回弹效果
$('#nav li').stop().animate({'marginLeft':'-65px'},1000);
//鼠标覆盖后出现向右弹出的效果用 hover 实现 ,hover分为两种状态一个是移入，一个是移出
$('li').hover(
function(){
$(this).stop().animate({'marginLeft':'-2px'},500)
},
function(){
$(this).stop().animate({'marginLeft':'-65px'},500)
}
)
})
</script>
</head>
<body>
<ul id="nav">
<li class="li1"><i class="fa fa-address-card"></i> </li>
<li class="li2"><i class="fa fa-user-circle-o"></i> </li>
</ul>
</body>
</html>
批改老师：天蓬老师批改时间：2019-02-01 16:09:22
老师总结：jquery中的自定义动画 ,还是很神奇的, 它封装了很多js动画函数效果, 不过, 现在的趋势, 是用css3中的动画夫替代掉js才能实现的动画, 事实也是这样的, 很多的原来必须要通过js上百行代码才能实现的动画, 现在用css3只要几行代码就OK, 不过,js制作图表功能还是很强大的, 有空了解一下: echart
