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

显示此方法为回调

目录
打赏
0
0
0
0
42
分享
相关文章
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
72 21
|
5月前
|
jQuery 效果 - 滑动
jQuery 效果 - 滑动
32 5
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
75 13
|
7月前
|
jQuery 效果 - 滑动
jQuery 效果 - 滑动
42 5
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
50 0
jQuery 第五章(效果,滑动,动画,停止动画)
jQuery 第五章(效果,滑动,动画,停止动画)
98 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等