一、自定义动画
jQuery动画的本质：在指定时间内不断的改变元素的行内样式值来实现的。
1) animate(params,[speed],[easing],[fn]) 自定义动画
params:必传。css样式json(css键值对形式的json对象)
speed: 可选。动画时间。可选值: "slow","normal", "fast", 9000
easing:可选。动画方式。可选值: "swing","linear"
fn: 可选。回调函数
2) stop() 停止动画
1、传参
1) css样式json必传。其余的参数可选。
2) css样式名必须是驼峰形式。
比如用marginLeft代替margin-left.
3) css样式值可以带单位，也可以不带单位。
4) css样式值可以+/-。表示在当前样式值的基础上进行加或减。
5) 自定义动画只能设置css样式值是数值型的，不能设置非数值型的，比如颜色。
如果想设置颜色类型的样式，则需要引入其他库。
色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jquery.com 下载 Color Animations 插件
2、自定义动画原理
自定义动画设置的css样式最终都会添加到元素行内样式中，不做任何改变。
唯一不同的是，设置样式值时是通过不断改变样式值来改变的。
1.1 传参
1）传参
//css样式必传，其余可选
$("div").animate({
'width':400,
'height':400
})
//1、指定动画时间
$("div").animate({
'width':400,
'height':400,
},2000 )
//2、指定动画时间。指定动画方式
$("div").animate({
'width':400,
'height':400,
},2000,'swing' )
//3、指定动画时间。指定动画方式。回调函数
$("div").animate({
'width':400,
'height':400,
},2000,'swing',function(){ } )
2）注意事项
>>>>>> css样式json必传。其余的参数可选。
//css样式必传
$("div").animate({
width:400,
height:400
})
//传入动画时间
$("div").animate({
width:400,
height:400
},2000)
//传入动画时间、动画方式
$("div").animate({
width:400,
height:400
},2000,'linear')
//传入动画时间、动画方式、回调函数
$("div").animate({
width:400,
height:400
},2000,'linear',function(){
alert('123')
})
>>>>>> css样式名必须是驼峰形式。
<body>
<button>逐步向右移动</button>
<button>逐步向左移动</button>
<div style="width:200px;height:200px;background-color: red;margin-top: 20px;position: relative;">1212</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
//左边距200像素
$("button").eq(0).click(function(){
$("div").animate({
'marginLeft':'200px'
},2000)
})
//左边距200像素
$("button").eq(1).click(function(){
$("div").animate({
'marginLeft':'0px'
},1000)
})
</script>
>>>>>> css样式值可以带单位，也可以不带单位
$("div").animate({
width:400,
height:400
})
$("div").animate({
width:'400px',
height:'400px'
})
>>>>>> css样式值可以 += / -=。表示在当前样式值的基础上进行加或减
注意：该特性可以实现持续动态效果
//表示在原样式的基础上进行加或减
$("div").animate({
left:'+=100', //表示在left的基础上加上100像素
top:'-=100' //表示在top的基础上减去100像素
})
>>>>>> 自定义动画只能设置css样式值是数值型的，不能设置非数值型的。如果想设置颜色加入，则引入其他的库。
使用jQuery原生库设置背景颜色动画无效。原因是由于自定义动画只能设置数值型的样式，不能
设置非数值型的样式。如果想设置颜色，则需引入其他的库。
色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jquery.com 下载 Color
>>>>>> 链式调用
//先改变宽度为400，在改变高度为2000
$("div").animate({
width:400
},1000).animate({
height:400
},2000)
1.2 自定义动画要点
1、自定义动画可以设置动态值。
2、自定义动画只能设置css样式值是数值型的，不能设置非数值型的。
如果想设置颜色加入，则引入其他的库。
3、自定义动画原理:
自定义动画设置的样式最终会设置到行内样式内中。
在指定时间内不断的改变元素的行内样式值来实现的。
1）自定义动画可以设置动态值
>>>>>> 移动到指定位置
<body>
<button>移动到200px</button>
<button>移动到100px</button>
<div style="width:200px;height:200px;background-color: red;margin-top: 20px;"></div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
//移动到200px
$("button").eq(0).click(function(){
$("div").animate({
"margin-left":"200px"
})
})
//移动到100px
$("button").eq(1).click(function(){
$("div").animate({
"margin-left":"100px"
})
})
</script>
>>>>>> 移动指定距离（自定义动画可以设置动态值）
<body>
<button>逐步向右移动</button>
<button>逐步向左移动</button>
<div style="width:200px;height:200px;background-color: red;margin-top: 20px;"></div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
//逐步向右移动
$("button").eq(0).click(function(){
$("div").animate({
"margin-left":"+=200px"
})
})
//逐步向左移动
$("button").eq(1).click(function(){
$("div").animate({
"margin-left":"-=200px"
})
})
</script>
2）自定义动画只能设置css样式值是数值型的，不能设置非数值型的
<body>
<button>测试非数值型</button>
<div style="width:200px;height:200px;background-color: red;margin-top: 20px;"></div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$("button").eq(0).click(function(){
$("div").animate({
"display":"none"
})
})
</script>
3）自定义动画原理
自定义动画会将设置的样式添加到行内样式中。只不过会通过不断改变样式值来实现动态效果
<body>
<button>增加宽度</button>
<button>增加高度</button>
<div style="width:200px;height:200px;background-color: red;margin-top: 20px;"></div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$("button").eq(0).click(function(){
$("div").animate({
"width":"+=50px"
})
})
$("button").eq(1).click(function(){
$("div").animate({
"height":"+=100px"
})
})
</script>
1.3 使用案例
1）逐步扩大与缩小
<body>
<button>逐步扩大</button>
<button>逐步缩小</button>
<div style="width:200px;height:200px;background-color: red;margin-top: 20px;position: relative;"></div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
//逐步扩大
$("button").eq(0).click(function(){
$("div").animate({
width:400,
height:400
})
})
//逐步缩小
$("button").eq(1).click(function(){
$("div").animate({
width:'200px',
height:'200px'
})
})
</script>
2）链式调用：向右移动至200px。向下移动至200px
<body>
<button>向右移动到200px在向下移动200px</button>
<div style="width:200px;height:200px;background-color: red;margin-top: 20px;position: relative;">1212</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$("button").eq(0).click(function(){
$("div").animate({
'left':'200'
}).animate({
'top':'200px'
})
})
</script>
3）样式值：+= / -= 实现持续动态效果
>>>>>> 移到指定位置
<body>
<button>移到指定位置</button>
<div style="width:200px;height:200px;background-color: red;margin-top: 20px;position: relative;">1212</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
// //移到指定位置
$("button").eq(0).click(function(){
$("div").animate({
left:200,
top:200
})
})
</script>
>>>>>> 移动指定距离 ( 持续动态效果 )
<body>
<button>移动到指定位置</button>
<button>向右移动指定距离</button>
<button>向左移动指定距离</button>
<div style="width:200px;height:200px;background-color: red;margin-top: 20px;position: relative;">1212</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
//移动到指定位置200px
$("button").eq(0).click(function(){
$("div").animate({
"left":200
})
})
//移动距离（在原基础之上,向左移动200像素）
$("button").eq(1).click(function(){
$("div").animate({
"left":"+=200"
})
})
//移动距离（在原基础之上,向右移动200像素）
$("button").eq(2).click(function(){
$("div").animate({
"left":"-=200"
})
})
</script>
4）停止动画
<body>
<button>开始向右移动</button>
<button>停止</button>
<div style="width:200px;height:200px;background-color: red;margin-top: 20px;position: relative;">1212</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
//开始移动
$("button").eq(0).click(function(){
$("div").animate({
'left':'+=200'
},1000)
})
//停止
$("button").eq(1).click(function(){
$("div").stop();
})
</script>
二、自定义动画应用案例
2.1 自定义动画模拟jQuery内置动画
1）模拟淡入淡出
<body>
<button>淡出</button>
<button>淡入</button>
<div style="width:200px;height:200px;background-color: red;margin-top: 20px;position: relative;">1212</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
//淡出
$("button").eq(0).click(function(){
$("div").animate({
'opacity':0
})
})
//淡入
$("button").eq(1).click(function(){
$("div").animate({
'opacity':10
},2000)
})
</script>
2）模拟滑动收缩、展开
<body>
<button>滑动收缩</button>
<button>滑动展开</button>
<div style="width:200px;height:200px;background-color: red;margin-top: 20px;position: relative;">1212</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
var srcHeight=$('div').height();
//淡出
$("button").eq(0).click(function(){
$("div").animate({
'height':0
})
})
//淡入
$("button").eq(1).click(function(){
$("div").animate({
'height':srcHeight
},2000)
})
</script>
3）模拟显示、消失
<body>
<button>慢慢消失</button>
<button>慢慢显示</button>
<div style="width:200px;height:200px;background-color: red;margin-top: 20px;position: relative;">1212</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
var srcHeight=$('div').height();
var srcWidth=$('div').width();
//慢慢消失
$("button").eq(0).click(function(){
$("div").animate({
'width':0,
'height':0,
'opacity':0
},1000)
})
//慢慢显示
$("button").eq(1).click(function(){
$("div").animate({
'width':srcWidth,
'height':srcHeight,
'opacity':10
},2000)
})
</script>
2.2 实现动态菜单
>>>>>> 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.w{
margin:0 auto;
}
.menus{
display: flex;
justify-content:space-around;
width:80%;
background-color: rgb(40, 105, 179);
color:rgb(243, 237, 237);
line-height: 50px;
height:50px;
font-size: 16px;
}
.menus>li{
position: relative;
width:150px;
text-align: center;
}
.menus>li:hover{
background-color: rgba(0,0,0,0.3);
}
.items{
position: absolute;
background-color: rgba(0,0,0,0.8);
width:100%;
height:0;
text-align: center;
overflow:hidden
}
.items li{
background-color: rgb(40, 105, 179,0.2);
padding-left:20px;
border:2px solid rgba(12, 61, 117, 0.2);
}
.items li:hover{
background-color: red;
}
</style>
</head>
<body>
<div>
<ul class="menus w">
<li>
<span>报表平台</span>
</li>
<li>
<span>授信平台</span>
</li>
<li>
<span>风控平台</span>
</li>
<li>
<span>中台</span>
</li>
<li>
<span>系统设置</span>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
var menuItems=[['电影1','电影1','小白露','江边路','电影1','电影1','电影1'],
['电影2','电影1','电影1','电影1','白小白','电影1','电影1'],
['电影3','电影1','电影1','电影1','白小二','电影1','电影1'],
['电影4','电影1','电影1','电影1','白小三','电影1','电影1']]
//初始化菜单
initMenus();
function initMenus(){
var $lis=$(".menus>li");
for(var i=0;i<$lis.length;i++){
var menus=menuItems[i];
if(menus==undefined){continue}
//初始化菜单树模板
var str="<ul class='items'>";
for(var index=0;index<menus.length;index++){
var str=str+"<li>"+menus[index]+"</li>"
}
str += "</ul>";
$($lis.get(i)).append(str);
}
}
//鼠标移入移除事件
$(".menus>li").hover(function(){
$(this).find(".items").stop();
var lengt=($(this).find(".items li").length+1) * 50;
$(this).find(".items").animate({
height:lengt
},500)
},function(){
$(this).find(".items").stop();
$(this).find(".items").animate({
height:0
},500)
})
})
</script>
</html>
>>>>>> 效果
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
