qq_3439057通过本文主要向大家介绍了jquery,动画等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
下面用代码说明：
布局代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="jquery-3.2.1.min.js"></script>
<script src="test.js"></script>
<!--<link type="text/css" rel="stylesheet" href="test.css">-->
</head>
<body>
<p id="test">动画的回调</p>
<button id="btn">回调</button>
</body>
</html>
test.js的代码
$(document).ready(function () {
$("#btn").click(function () {
$("#test").hide(1000.function () {
alert("方法已经被调用");
})
});
})
从代码中可以知道当动画执行完成后就会执行回调方法从而弹出一弹窗。
这就是简单的动画回调。
下面说一下多个动画的执行：
布局的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="jquery-3.2.1.min.js"></script>
<script src="test.js"></script>
<!--<link type="text/css" rel="stylesheet" href="test.css">-->
</head>
<body>
<p id="test">多个动画</p>
<button id="btn">动画</button>
</body>
</html>
js的代码：
$(document).ready(function () {
$("#btn").click(function () {
$("p").css("color","Blue").slideUp(1000).fadeTo(1000,0.5).slideDown(1000);
});
})
从上面的代码可以看出多个动画通过”.”来进行添加的。我说一下上面的代码吧，当点击事件发生后p标签的颜色会改为蓝色（你也可以改成其它的颜色，这是不限定的），然后执行隐藏动画，再到标签的透明度变化，最后再执行显示动画。