开发者学堂课程【jQuery 开发教程：jQuery 特效_滑动，回调】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4309
jQuery 特效_滑动，回调
<!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(){
//点击下调
效果图：
点击后：
其内容就会在规定的时间缓慢出现
$("#content").slideDown(1000);
});
//点击隐藏
$("#fliphide").click(function(){
$("#content").slideUp(1000);
});
效果图：
//点击隐藏和下调都行
$( "#fliptoggle").click( function(){
$("#content").slideToggle(1000);
})
效果图：
//第二个功能（需要注释前两个功能）
$( "button").click(function(){
$( "p").hide(1000, function(){
alert("动画完毕，此方法为回调");
})
})
//动画效果
$("p").css("color","red").slideUp(1000).slideDown(1000);
})
</script>
< /body>
</html>
//每一个功能要在样式设置中更新
效果图：
点击隐藏藏完毕
隐藏之后浏览器弹出对话框：
显示此方法为