jquery的动画方法
公冶元青
动画效果
改变元素的显示和隐藏
DOM : 运动插件的封装
move(‘width’,‘500’,1000) 动画效果
show() 显示 通过设置display属性改变
hide() 隐藏 通过设置display属性改变
toggle() 切换
同时改变元素的宽高和透明度来隐藏和显示元素
参数1：时间
参数2 ：函数
参数3： 运动速度
fadeIn() 淡入 让元素显示
fadeOut() 淡出 让元素隐藏
通过元素的透明度让元素显示和隐藏,同时也会设置元素的display属性
fadeTo(3000,0.5,fn) 设置元素变化透明度的目标值 0-1
fadeToggle() 切换 将元素的透明度从0切换到1 / 从1-0
slideDown() 卷入
slideUp() 卷出
slideToggle() 切换
animate()
集合了以上的所有效果
通过改变元素的属性来达到动画效果
参数1: 属性对象
参数2：时间
参数3: 速度
参数4：回调函数
<!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>
<script src="js/jquery.js"></script>
<style>
div{
width: 100px;
height: 100px;
background: hotpink;
position: absolute;
top: 0;
left: 0;
}
button{
position: absolute;
top:100px;
}
</style>
</head>
<body>
<div></div>
<button>点我</button>
<script>
// animate()
// div 宽度 定位：0 0 -》 100 100
// $('button').click(function(){
// $('div').animate({
// 'width':500,
// 'top':100,
// 'left':100
// },1000,'linear',function(){
// console.log('over');
// })
// })
// 在当前属性的值上 添加100px 直接在属性值上去进行运算 += 100
// $('button').click(function(){
// $('div').animate({
// 'width':'+=100',
// 'top':'+=100',
// 'left':'+=100'
// },1000,'linear',function(){
// console.log('over');
// })
// })
// 回调函数：函数中，当函数的功能执行完成后，然后执行传递的参数（函数）
// 递归： 在函数内容 只有执行完函数中的代码 才能结束函数
// 事情1 干完 -》 执行事件2 -》 处理事件3
// 处理事件1中 得到的结果是错误的 promise 回调地狱
$('button').click(function(){
$('div').animate({
'width':500,
'top':100,
'left':100
},1000,'linear',function(){
$('button').animate({
'width':100,
'height':100,
},2000,'swing',function(){
})
})
})
// var one = new Promise();
// one.then(function(){
// // 成功后的要执行的事件
// },function(){
// //
// })
// 面试重点 ： promise
</script>
</body>
</html>
stop() 停止动画
finish() 完成动画
delay() 延迟动画
<!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>
<script src="js/jquery.js"></script>
<style>
div{
width: 100px;
height: 100px;
background: hotpink;
position: absolute;
top: 50px;
left: 0;
}
</style>
</head>
<body>
<div></div>
<button>stop</button>
<button>finish</button>
<button>delay</button>
<script>
$('div').click(function(){
$(this).animate({
'opacity':0.2,
// 'background':'red',
'top':200,
},2000).delay(2000).animate({
'width':500,
'height':500
})
})
$('button:eq(0)').click(function(){
// stop 停止当前正在进行的动画 直接完成最后一个动画
// 传参true 停止当前所有的动画
// true true 直接完成当前动画 然后停止后面所有的动画
$('div').stop(true,true);
})
$('button:eq(1)').click(function(){
// 直接到达所有动画的目标 但是没有执行的过程
$('div').finish();
})
// 将需要延迟的动画前调用delay
$('button:eq(2)').click(function(){
// $('div').;
})
</script>
</body>
</html>
类似资料：