jQuery.动画
动画
animate()方法动画原理：改变CSS属性来影响元素行为。目前仅仅能修改属性值为数值的属性，如height weight font-size等，属性值为字符串的属性不能改。
更重要的是：在animate()方法中，属性名采用caml命令，不能使用-，如border-bottom，要写成borderBottom，将中间的-去掉，第二个单词首字母大写。
animate()的参数有几部分，CCS部分，用花括号括起来。在花括号后面还有3个可选参数。
speed参数表示动画持续时间，单位是毫秒。1秒=1000毫秒。
easing参数，可以选择两个，一个是linear，表示动画速度是线性的，另一个是swing，表示动画过程快，开始和结尾慢。
complete参数，表示动画结束时需要调用的函数——回调函数。事件本质是函数，是回调函数。
<!DOCTYPE html>
<html>
<head>
<title>动画</title>
<meta charset="UTF-8">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<style>
li{
max-height: 200px;
background-color: #9900cc
}
</style>
</head>
<body>
<div>
<ul>
<li id="a">jhgffd</li>
<li id="b">rgegfe</li>
<li id="c">njnfsd</li>
<li id="d">bhgvdd</li>
</ul>
</div>
<script>
$(function () {
var $li=$("li");
$li.hide().each(function(index){
$(this).delay(650*index).fadeIn(700);
});
$li.on("click",function(){
//$(this).fadeOut(700);
$(htis).anemate({
opcity:0.0,
paddingLeft:'+=80+'
},500,function(){
$(this.remove();
});
});
});
</script>
</body>
</html>
