- 智能AI问答！更聪明、更完整、原创作！
- 一款基于GPT的超级AI机器人，可以回答问题、聊天、创作、写文案！
3.试用jQuery方法链对段落元素<p>我的姓名是：张三，学号是：*****</p>依次执行隐藏-显示-淡出-淡入的系列动作，每个动作均要求持续3秒,点击按钮触发动画效果。
发布于 2024-06-21 12:20:07
要实现这个需求，你可以使用jQuery来编写一个简单的脚本，以下是一段代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jQuery 动画示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/* 初始样式：段落文本 */
p {
display: none; /* 初始为隐藏状态 */
}
</style>
</head>
<body>
<p>我的姓名是：张三，学号是：*****</p>
<button id="animateButton">动画效果</button>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
// 执行方法链的动画效果
$("p")
// 隐藏段落
.hide(3000)
// 显示段落
.show(3000, function(){
// 显示完毕后淡出
$(this).fadeOut(3000, function(){
// 淡出完毕后淡入
$(this).fadeIn(3000);
});
});
});
});
</script>
</body>
</html>在这个代码中：
- 段落
<p>初始设置为隐藏状态。 - 按钮
<button>被点击时，会触发动画效果。 - 使用jQuery的
.hide(),.show(),.fadeOut(),.fadeIn()方法来分别实现隐藏、显示、淡出和淡入的效果。 - 每个动画持续时间为3秒（3000毫秒）。
用户点击按钮时，段落文本会先隐藏3秒，然后显示3秒，接着淡出3秒，最后淡入3秒。动画效果将依次执行。这个代码示例展示了如何利用jQuery方法链来连续执行多个动画效果。
0 条评论
关于作者
