jQuery 特效_滑动，回调|学习笔记-阿里云开发者社区

jQuery 特效_滑动，回调|学习笔记

2022-02-17 194

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 快速学习 jQuery 特效_滑动，回调

开发者学堂课程【jQuery 开发教程：jQuery 特效_滑动，回调】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/362/detail/4309

jQuery 特效_滑动，回调

一、滑动和回调

创建一个新的html文件silde

图片72.png

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8">
<title></title>
//引入jquery
<script src="jquery-2.2.1.min.js"s</script>
//样式设置
<style>
#content{
 padding: 50px;
 display: none;
 }
 #flipshow , #content,#fliphide,#fliptoggle{
 padding: 5px
 text-align: center; 
 background-color: aquamarine;
 border: 1px solid green;
</style>
</head>
<body>
//div盒子设置按钮名字
<div id="flipshow">点击显示</div>
<div id="fliphide">点击隐藏</div>
<div id="fliptoggle"隐藏或显示</div>
<div id="content">hello world</div>
<script>
$(function(){
//点击事件
$("#flipshow").click(function(){
//点击下调

效果图：

图片73.png

点击后：

图片74.png

其内容就会在规定的时间缓慢出现

$("#content").slideDown(1000);
});
//点击隐藏
$("#fliphide").click(function(){
  $("#content").slideUp(1000);
});

效果图：

图片75.png

点击显示出现内容：

图片76.png

点击隐藏内容被隐藏：

图片77.png

//点击隐藏和下调都行
$( "#fliptoggle").click( function(){
$("#content").slideToggle(1000);
})

效果图：

图片78.png

点击隐藏或显示，首先显示

图片79.png

再次点击隐藏

图片80.png

//第二个功能（需要注释前两个功能）
$( "button").click(function(){
$( "p").hide(1000, function(){
alert("动画完毕，此方法为回调"); 
})
})
//动画效果
$("p").css("color","red").slideUp(1000).slideDown(1000);
})
</script>
< /body>
</html>
//每一个功能要在样式设置中更新