使用jq 实现动画循环效果 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
height: 200px;
background-color: green;
font-size: 60px;
color: white;
}
.item {
width: 200px;
height: 200px;
position: fixed;
top: 0;
left: 0;
background-color: red;
}
</style>
</head>
<body> <div class="item"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script> function run(){
$('.item').animate({
width: '50px',
height : '50px',
// backgroundColor : 'yellow',
//animate不支持背景色的变化，要导入一个jq实现的颜色库
top: '300px',
left : '300px'
},5000,function(){
$('.item').animate({
width: '200px',
height : '200px',
top: '0',
left : '0'
},3000,run);
});
}; run();
// 接受三个参数，第一个是对象，接受目标样式列表； 第二个是时间；第三个是执行完成的回调函数
</script>
</body>
</html>
吧执行的代码封装在函数里，并作为他自己的回调函数。就可以实现动画的反复实现
色彩动画不包含在核心jq库中~~~
padding-left 之类的值要写成驼峰的命名方法
然后，改变的样式，也可以做相对值的运算，相对于原有值
$('.item').animate({
width: '+=200px',
height: '-=50px'
},3000);也可以使用预设的值 "show"、"hide" 或 "toggle"：
举个栗子~~
$('.item').animate({
width: 'hide'
}, 3000);给元素设置了多个animate动画时，会按设置顺序逐一执行。不会产生覆盖。
举个栗子~
<div class="item">いのししですね</div>
<button class="btn">button</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$("button").click(function () {
var div = $("div");
div.animate({
height: '300px',
opacity: '0.4'
}, "slow");
div.animate({
width: '300px',
opacity: '0.8'
}, "slow");
div.animate({
height: '100px',
opacity: '0.4'
}, "slow");
div.animate({
width: '100px',
opacity: '0.8'
}, "slow");
});
</script>
jq停止动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> .wrap {
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body> <button class="btn1">start</button>
<button class="btn2">end</button> <div class="wrap"> </div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('.btn1').click(function(){
$('.wrap').animate({
width: '100vw',
height : '100vh'
},8000);
});
$('.btn2').click(function(){
$('.wrap').stop();
});
</script>
</body>
</html>