jQuery--自定义动画animate()
语法结构
animate(params,speed,callback)
params：包含一个样式属性及值的映射。比如{property1:'value1',property:'value2',......}
speed：速度参数，可选。
callback：在动画完成时执行的函数，可选
1、自定义简单动画，使元素在3秒（3000毫秒），向右移动500像素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #panel{ position: relative; width: 100px; height: 100px; border:1px solid black; background: red; cursor: pointer; opacity: 0.5; } </style> <script type="text/javascript" src='jquery-3.2.1.min.js'></script> <script type="text/javascript"> $(function(){ $('#panel').click(function(){ $(this).animate({left:'500px'},3000) }); }); </script> </head> <body> <div id="panel"></div> </body> </html>
2、累加、累减动画
'-='或者'+='表示在当前位置累加或者累减
$(function(){ $('#panel').click(function(){ $(this).animate({left:'+=500px'},3000) }); });
3、多重动画
1）、同时执行多个动画
$(function(){ $('#panel').click(function(){ $(this).animate({left:'+=500px',height:'200px'},3000); }); });
2）、按顺序执行多个动画
$(function(){ $('#panel').click(function(){ $(this).animate({left:'+=500px'},3000).animate({height:'200px'},3000); }); });
4、综合动画
单击div元素，让他向右移动的同时增加他的高度，并将不透明从50%变成100%，然后在从上到下移动，同时他的宽度变大，当完成这些效果后，让他以淡出的方式隐藏
$(function(){ $('#panel').click(function(){ $(this).animate({left:'500px',height:'200px',opacity:'1'},3000).animate({top:'100px',width:'200px'},3000).fadeOut(3000); }); });
5、回调函数
最后一步切换div的CSS样式
$(function(){ $('#panel').click(function(){ $(this).animate({left:'500px',height:'200px',opacity:'1'},3000).animate({top:'100px',width:'200px'},3000,function(){ $(this).css('border','10px solid black'); }); }); });
