版权声明：本文为本人原创文章，转载请附上原文出处链接和本声明
本文链接：点开
（我不是广告）这是一个来自地球的某个角落的人写的一些神奇的事物，虽然网上资料繁多，但我的通俗易懂，来了就是赚到，就像马云不认识你却借你钱，我不认识你我却给你。。。。。（比喻比喻）；
，。 、来我是个学生却被逼无奈要成为一个作家，无妨无妨
首先交同学们移动，我们一步一步来，下面是我学习的理解出的，没有那么官网，通俗易懂哦
以下都是用 一.1. 这个为例子
一.普通的平移
1.我们先写HTML的代码，在body里面写
<body>
<button>开始动画</button>//这是定义一个按钮，名字叫开始动画
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#994455;height:100px;width:100px;position:absolute;">//定义它的背景颜色，宽高跟属性
</div>
</body>
显示的页面就是这个样子
2.然后咋们写
翻译：animate： 把…制作成动画片
官方：animate() 方法用于创建自定义动画
我：就是调用这个方法可以去改变当前的样子
animate({left:'500px'})：就是让它向右一定500px（像素）
<script>
$(function(){
$("button").click(function(){
$("div").animate({left:'500px'});
});
});
</script>
3.点击开始动画按钮后：生动形象
4.然后总代码
<!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>
<script src="./jquery-3.3.1.js"></script>
<script>
$(function(){
$("button").click(function(){
$("div").animate({left:'500px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的HTML元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute</p>
<div style="background: #994455;height:150px;width:150px;position:absolute;"></div>
</body>
</html>
5.千万不要抄代码，要一步一步的去，最好记住，有思维的记住，不要记死代码，这不是应付考试
一个小小的平移却写了这么多，当然我不会夸自己，我只是为了让同学们更好地学习，更简单。
二.平移中改变自身
1.animate() - 操作多个属性：意思就是可以在平移的时候改变自身，比如：宽高，透明度
<script>
$(function () {
$("button").click(function () {
$("div").animate({
left: '250px',
opacity: '0.1',
height: '150px',
width: '150px'
});
});
});
</script>
效果前：
效果后：
2.animate() - 使用相对值
button按钮可以一直点击且有效 无线循环
<script>
$(function () {
$("button").click(function () {
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
});
</script>
3.animate() - 使用预定义的值
可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
show：显示
hide：隐藏
toggle：显示/隐藏
<script>
$(function () {
$("button").click(function () {
$("div").animate({
height: 'toggle'
});
});
});
</script>
4.jQuery animate() - 使用队列功能
官方：这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用
我：一个一个运行，根据前一个改变自身，依次改变
<script>
$(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'500px',opacity:'0.5'},"slow");//宽度100不变，高度变为500px，透明度为0.5
div.animate({width:'500px',opacity:'0.8'},"slow")//宽度变为500，高度为500px，透明度为0.8
div.animate({height:'200px',opacity:'0.5'},"slow");//宽度为500，高度变为200px，透明度为0.5
div.animate({width:'200px',opacity:'0.8'},"slow");//宽度变为200，高度为200px，透明度为0.8
});
});
</script>
网友评论