jQuery动画
jQuery动画分为两种分别是预定义动画和自定义动画
- 所谓预定义动画就是jQuery已经封装好的
- 自定义动画就是需要自己定义的动画
预定义动画
显示与隐藏
- show()方法 – 用于将指定元素显示
- show()无参数用法 – 不写参数就没有动画效果
- show(speed,easing,fn) – 通过同时改变元素的高度和宽度实现动画效果
- speed参数 – 表示动画执行的时长(‘slow’,’normal’和’fast’)
- 自定义动画执行时长是以毫秒为单位
- easing – 用来指定切换效果,默认是’swing’,,可用参数是’linear’
- easing一般是配合第三方插件使用(不常用)
- fn – 表示动画执行完毕后调用的函数
示例代码:
<script src="js/jquery.js"></script>
<style>
#box {
width: 200px;
height: 200px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
/*
显示与隐藏
1.无动画版本
* show() - 显示
* hide() - 隐藏
2.有动画版本 - 同时改变宽度和高度
* show(speed, callback)
* speed - 动画执行的时长，单位为毫秒
* callback - 动画执行完毕后的回调函数
* hide(speed, callback)
* speed - 动画执行的时长，单位为毫秒
* callback - 动画执行完毕后的回调函数
*/
$('#box').hide(3000, function(){
$('#box').show(3000);
});
</script>
</body>滑动式动画效果
slideDown()和slideUp()只存在具有具有动画效果的方法
- 注意 – 没有无动画版本(底层代码预定义动画执行的时长)
- 效果 – 改变指定元素的高度
示例代码:
<script src="js/jquery.js"></script>
<style>
#box {
width: 200px;
height: 200px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
/*
滑动式动画 - slideUp()和slideDown()
* 注意 - 没有无动画版本(底层代码预定义动画执行的时长)
* 效果 - 改变指定元素的高度
*/
$('#box').slideUp(3000);
$('#box').slideDown(3000);
</script>
</body>淡入淡出动画
示例代码:
<script src="js/jquery.js"></script>
<style>
#box {
width: 200px;
height: 200px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
// 改变的元素的透明度
$('#box').fadeOut(3000);
$('#box').fadeIn(3000);
</script>
</body>自定义动画
animate()方法
- animate(perproties,duration,callback)
- perproties – object类型, 表示设置CSS样式属性和值
- duration – 表示动画执行的时长,以毫秒为单位
- callback – 表示当动画执行完毕后调用的函数
- 备注: 动画执行效果 – css样式“用大括号｛｝包裹
示例代码:
<script src="js/jquery.js"></script>
<style>
#box{
width: 300px;
height: 300px;
background-color: cyan;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
/*
animate()方法 - 表示自定义动画方法
1. animate(properties,duration,callback)
* properties - 表示CSS样式属性
* 设置动画执行结束的样式属性值
* duration - 表示动画执行的时长,以毫秒为单位
* callback - 表示动画执行完毕后的回调函数
2. animate(properties, options)
* properties - 表示CSS样式属性
* 设置动画执行结束的样式属性
* options - 表示设置动画的相关参数
* duration - 表示动画执行的时长,以毫秒为单位
* complete - 表示动画执行完毕后的回调函数
* queue - 布尔值,设置是否添加到动画队列中
*/
/*$('#box').animate({
width :800,
height :600
},5000);*/
/*$('#box').animate({
left :200
},3000);*/
$('#box').animate({
left : 100
}, {
speed : 3000
});
</script>
</body>并发与排队效果
- 并发效果 – 设置多个样式属性 – 执行动画时, 同时改变所有样式属性的值
- 排队效果 – 设置多个样式属性值 – 执行动画时, 按照先后顺序改变样式属性值
示例代码:
<script src="js/jquery.js"></script>
<style>
#box {
width: 200px;
height: 200px;
background-color: lightcoral;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
/*
并发效果 - 就是指多个动画同时执行
* 多个CSS的样式属性值同时改变 - 动画多个值综合效果
*/
/*$('#box').animate({
left : 400,
top : 400
}, 3000);*/
/*
排队效果 - 就是指多个动画按照定义的先后顺序执行
* 多个CSS的样式属性值先后改变
*/
/*$('#box').animate({
left : 400
}, 3000, function(){
$('#box').animate({
top : 400
}, 3000);
});*/
// queue - 用于控制当前的动画效果是并发还是排队效果
$('#box').animate({
left : 400
}, {
duration : 3000
}).animate({
top : 400
}, {
duration : 3000,
queue : true
});
</script>
</body>停止执行动画
- stop()方法没有接收任何参数时 – 立即停止执行动画
stop(queue)方法的第一个参数
- false – 表示停止当前动画，但队列中的动画继续执行
- true – 表示停止当前动画，并且清空动画队列
stop(queue, gotoEnd)方法的第二个参数
- false – 不会做任何处理
- true – 表示停止当前动画，并且将指定元素设置为动画执行完毕后的样式
示例代码:
<script src="js/jquery.js"></script>
<style>
#box {
width: 200px;
height: 200px;
background-color: lightcoral;
position: absolute;
}
</style>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<div id="box"></div>
<script>
$('#start').click(function(){
$('#box').animate({
left : 800
}, 3000).animate({
top : 600
}, 3000);
});
$('#stop').click(function(){
/*
* stop()方法没有接收任何参数时 - 立即停止执行动画
* stop(queue)方法的第一个参数
* false - 表示停止当前动画，但队列中的动画继续执行
* true - 表示停止当前动画，并且清空动画队列
* stop(queue, gotoEnd)方法的第二个参数
* false - 不会做任何处理
* true - 表示停止当前动画，并且将指定元素设置为动画执行完毕后的样式
*/
$('#box').stop(true, false);
});
</script>
</body>延迟执行动画
- delay( )方法 – 表示为指定元素设置的动画效果进行延迟执行“括号中填写动画延迟多少时间 – 以毫秒为单位计算
示例代码:
<script src="js/jquery.js"></script>
<style>
#box {
width: 200px;
height: 200px;
background-color: lightcoral;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
$('#box').animate({
left: 800
}, 3000).delay(1000).animate({
top: 600
}, 3000);
</script>
</body>