animate()使用方法
animate(要改边的属性集合,动画速度,切换效果,回调函数)
要改边的属性集合- - - 以对象的形式传递,必须写,属性名可以不用带引号,如果是复合属性需要采用驼峰命名法,如 backgroundColor。
动画速度- - -“slow”、“normal”、“fast”或者动画时长的毫秒数值(eg:1000- - -1秒)
切换效果- - -默认是“swing”(先快后慢),可以用“liner”(匀速)
回调函数- - -动画完成时执行的函数,每个元素执行一次。
要改边的属性集合是必需要写的,后面几个参数可以不写
代码示例:
<!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>自定义动画</title>
<style>
img {
position: absolute;
width: 100px;
height: 100px;
}
</style>
<script src="js/jQuery.min.js"></script>
</head>
<body>
<button>点击图片变化</button>
<div>
<img src="images/小狐狸3.jpg" alt="">
</div>
<script>
$("button").click(function() {
$("img").animate({
/* left: "300px",
top: "300px",
width: "222px",
height: "222px"
写法效果和下面写法一样,如果属性值是数字可以不带单位
*/
left: 300,
top: 300,
width: 222,
height: 222
},500);
});
</script>
</body>
</html>