创建包含多重效果的自定义动画:animate()
animate(properties , [duration] , [easing] , [callback])
animate(properties , options)
参数解释:
properties:一组CSS属性,动画将朝着这组属性移动
duration:一个字符串或数字,用来定义动画将运行多久
easing:一个用来表示使用哪个缓冲函数来过渡的字符串
callback:动画完成时执行的函数
options:一组包含动画选项的值的集合。支持的选项如下:
duration:3种预定速度之一的字符串:slow,fast,normal(默认);或表示动画时长的毫秒数值。
easing:要使用的擦除效果名称,需要插件支持,jQuery提供linear和swing(默认)两个值
complete:在动画完成时执行的函数
step:每步动画执行后调用的函数
queue:设定为false,将使此动画不进入动画队列。默认:true
specialEasing:一组一个或多个通过相应的参数和相对简单函数定义的CSS属性。
一、模拟show()方法的效果
应用:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>模拟show()方法的效果</title>
<script src="js/jquery2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("img").hide();
$("button").click(function(){
$("img").animate({
height:'show',
width:'show',
opacity:'show'
},'show')
});
});
</script>
</head>
<body>
<button>控制按钮1</button>
<p><img src="images/1.jpg" width="200"/></p>
</body>
</html>
关键:指定动画的形式以及动画结果样式属性的对象
应用1:单击按钮,图像恢复到原始大小
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>自定义动画</title>
<script src="js/jquery2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){