版权声明:本文为本人原创文章,转载请附上原文出处链接和本声明
本文链接:点开
(我不是广告)这是一个来自地球的某个角落的人写的一些神奇的事物,虽然网上资料繁多,但我的通俗易懂,来了就是赚到,就像马云不认识你却借你钱,我不认识你我却给你。。。。。(比喻比喻);
,。 、来我是个学生却被逼无奈要成为一个作家,无妨无妨
首先交同学们移动,我们一步一步来,下面是我学习的理解出的,没有那么官网,通俗易懂哦
以下都是用 一.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>