您的位置：首页 > Web前端 > JQuery

jQuery学习二-动画回调和多个动画执行

2017-10-14 19:12 176 查看
上面学习了动画效果，现在学习一下动画的回调和多个动画的使用

下面用代码说明：

布局代码：

<!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标签的颜色会改为蓝色（你也可以改成其它的颜色，这是不限定的），然后执行隐藏动画，再到标签的透明度变化，最后再执行显示动画。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery 动画
相关文章推荐
新的分享
章节导航