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

简介: 快速学习 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>
//每一个功能要在样式设置中更新

效果图:

图片81.png点击隐藏图片82.png隐藏完毕

隐藏之后浏览器弹出对话框:

图片83.png

显示此方法为回调

相关文章
|
20天前
|
JavaScript
jQuery 效果 - 滑动
jQuery 效果 - 滑动
17 5
|
2月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
50 13
|
3月前
|
JavaScript
jQuery 效果 - 滑动
jQuery 效果 - 滑动
26 5
|
5月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
36 0
|
5月前
|
JavaScript
|
5月前
|
JavaScript
jQuery制作滑动特效(1)
jQuery制作滑动特效(1)
|
5月前
|
JavaScript
|
5月前
|
JavaScript 前端开发 Windows
jQuery权威指南学习笔记
jQuery权威指南学习笔记
|
5月前
|
JavaScript 前端开发
jQuery 第五章(效果,滑动,动画,停止动画)
jQuery 第五章(效果,滑动,动画,停止动画)
74 0
|
12月前
|
JavaScript
JQuery 方法回调$callback
JQuery 方法回调$callback
36 0