开发者学堂课程【jQuery 开发教程：jQuery 特效_滑动，回调】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4309
jQuery 特效_滑动，回调
一、 滑动和回调
创建一个新的html文件silde
<!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> //每一个功能要在样式设置中更新
效果图：
点击隐藏
隐藏完毕
隐藏之后浏览器弹出对话框：
显示此方法为回调
