Mr.J-- jQuery学习笔记(十八)--自定义动画

最新推荐文章于 2022-06-05 00:26:06 发布

End_less__

最新推荐文章于 2022-06-05 00:26:06 发布

阅读量175

点赞数

分类专栏： jQuery学习

本文链接：https://blog.csdn.net/Ms_yjk/article/details/92981246

版权

jQuery学习专栏收录该内容

33 篇文章 3 订阅

订阅专栏

animate(params,[speed],[easing],[fn])

概述

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "<em>+=</em>" 或 "<em>-=</em>" 来让元素做相对运动。

jQuery 1.3中，如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

参数说明

params,[speed],[easing],[fn]Options,Number/String,String,FunctionV1.0

第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数

demo实例

页面渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            margin-top: 10px;
            background: red;
        }
        .two{
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<button>操作属性</button>
<button>累加属性</button>
<button>关键字</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>

demo1--操作属性

$("button").eq(0).click(function () {
$(".one").animate({
	width: 500
}, 1000, function () {
	alert("自定义动画执行完毕");
});

$(".two").animate({
	marginLeft: 500
}, 5000, "linear", function () {
	// alert("自定义动画执行完毕");
});
});

当运行的时候，第一个div会宽度增加500px,第二个div会向左移动500px;

$(".one").animate({
	width: 500
}, 1000, function () {
	alert("自定义动画执行完毕");
});

$(".one").animate({
	marginLeft: 500
}, 5000, function () {
	// alert("自定义动画执行完毕");
});

当一个div,有两个方法时，会根据顺序进行调用。

demo2--累加属性

$("button").eq(1).click(function () {
	$(".one").animate({
		width: "+=100"
	}, 1000, function () {
		alert("自定义动画执行完毕");
	});
});

对第一个div实现宽度增加100px;

demo3--利用关键字修改属性

$("button").eq(2).click(function () {
	$(".one").animate({
		// width: "hide"
		width: "toggle"
	}, 1000, function () {
		alert("自定义动画执行完毕");
	});
})

调用 width: "toggle" 将第一个div进行隐藏。

End_less__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Mr.J-- jQuery学习笔记(十八)--自定义动画

animate(params,[speed],[easing],[fn])概述用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.而每个属性的值表示这个样式属性到多少...
复制链接

扫一扫