jQuery 第六章 实例方法 动画
.fadeIn() .fadeout() .fadeToggle() .fadeTo()
.slideDown() .slideUp() .slideToggle()
-----------------------------------------------------------------------------------
.show()
显示匹配的元素 （注意点：显示的时候，会回到你设置的 display值 如果设置 block 就是 block，如果没有设置， 例如 p 标签就回到 liline， div 就回到 block ）
参数: null 或 (duration, easing, callblack)
duration: 为 毫秒。 动画 展示过程的 时间。 例如 1000 就是 用1秒的时间，展示这个过程，
easing: jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件, linear 为匀速运动
callblack: 为回调函数， 这个动画结束后执行的函数
.hide()
隐藏匹配的元素
参数: null 或 (duration, easing, callblack)
duration: 为 毫秒。 动画 展示过程的 时间。 例如 1000 就是 用1秒的时间，展示这个过程，
easing: jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件, linear 为匀速运动
callblack: 为回调函数， 这个动画结束后执行的函数
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 div{
10 width:100px;
11 border:1px solid black;
12 }
13 li{
14 display: none;
15 }
16 </style>
17 </head>
18 <body>
19
20 <div>
21 <ul>城市
22 <li>北京市</li>
23 <li>广州市</li>
24 <li>深圳市</li>
25 <li>上海</li>
26 </ul>
27 </div>
28
29 <script src="./jquery/jquery.js"></script>
30 <script>
31
32 $('ul').on('click', function(){
33 if($(this).find('li').css('display') == 'none'){
34 $(this).find('li').show(3000);
35 }else{
36 $(this).find('li').hide(3000);
37 }
38
39 })
40 </script>
41 </body>
42 </html>
.toggle()
切换效果，跟上面的代码执行结果一样， 可以说是简写了。
参数： 跟上面的一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
border:1px solid black;
}
li{
display: none;
}
</style>
</head>
<body> <div>
<ul>城市
<li>北京市</li>
<li>广州市</li>
<li>深圳市</li>
<li>上海</li>
</ul>
</div> <script src="./jquery/jquery.js"></script>
<script> // $('ul').on('click', function(){
// if($(this).find('li').css('display') == 'none'){
// $(this).find('li').show(3000);
// }else{
// $(this).find('li').hide(3000);
// }
// }) //跟上面的代码效果一样
$('ul').on('click', function(){
$(this).find('li').toggle();
}) </script>
</body>
</html>
.fadeln()
通过淡入的方式显示匹配元素。 通俗一点来讲就是， 透明度从 0.1 到 1 的过程
参数跟 show() 和 hide()方法一样
.fadeOut()
通过淡出的方式隐藏匹配元素。
1 $('ul').on('click', function(){
2 if($(this).find('li').css('display') == 'none'){
3 $(this).find('li').fadeIn(3000);
4 }else{
5 $(this).find('li').fadeOut(3000);
6 }
7 })
.fadeToggle()
切换的 简写
1 <script>
2
3 // $('ul').on('click', function(){
4 // if($(this).find('li').css('display') == 'none'){
5 // $(this).find('li').fadeIn(3000);
6 // }else{
7 // $(this).find('li').fadeOut(3000);
8 // }
9 // })
10
11 //跟上面的代码效果一样
12 $('ul').on('click', function(){
13 $(this).find('li').fadeToggle(3000);
14 })
15 </script>
.fadeTo()
变化到 哪里停， 参数跟上面的都一样， 不过加了 第二参数 , 第二参数 为， 到哪里就停止， 填透明值 0 ~ 1
参数: null 或 (duration,[opacity] ,easing, callblack)
.slideDown() .slideUp() .slideToggle() 等方法，上面方法，调的是透明度， 这些方法调的是 高度
jQuery 第六章 实例方法 动画的更多相关文章
- jQuery 第五章 实例方法 详解动画之animate()方法
.animate() .stop() .finish() ------------------------------------------------------------------- ...
- jQuery第六章
jQuery与Ajax应用 一.Ajax的优势和不足 1.Ajax的优势: (1)不需要插件支持:不需要任何浏览器插件就可以被绝大多数浏览器支持 (2)优秀的用户体验:能在不刷新整个页面的前提下更新数 ...
- jQuery 第六章 jQuery在Ajax应用
1.本章目标 ajax 2.ajax 异步刷新技术,我们的网页不需要全部刷新,按需实现局部刷新,上线后台的交互 用户体验好 地图,前台验证,表单提交,修改,查询等等 原生的js和ajax packag ...
- jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法
.queue() .dequeue() .clearQueue() ------------------------------------------------------------------ ...
- jQuery 第五章 实例方法 事件
.on() .one() .off() .trigger() .click / keydown / mouseenter ... .hover() ----------------------- ...
- jQuery 第四章 实例方法 DOM操作之data方法
jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上 有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有 ...
- jQuery 第四章 实例方法 DOM操作_基于jQuery对象增删改查相关方法
.next() .prev() .nextAll() .prevAll() .prevUntil() .nextUntli() .siblings() .children() .parent() .p ...
- jQuery 第七章 实例方法 位置图形
位置坐标图形大小相关方法: .offset() .position() .scrollTop() .scrollLeft() .width() .height() .innerWidth() inne ...
- 进击的Python【第十六章】：Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
随机推荐
- Vue-cli3以上安装jquery
vue-cli3以上就没有webpack.config.js这个文件了,所以在安装jquery时 终端执行 npm install jquery --save 之后查看package.json 安装 ...
- 线程池CachedThreadPool
没有核心线程,只有非核心线程,并且每个非核心线程空闲等待的时间为60s,采用SynchronousQueue队列 由于maximumPoolSize是无界的,所以如果线程处理任务速度小于提交任务的速度 ...
- Spring Boot打包部署
date: 2018-11-19 15:30:11 updated: 2018-11-21 08:28:37 Spring Boot打包部署 第一种方式 打包成jar包部署在服务器上 1.1 添加插件 ...
- 一起学Vue：入门
Why-为什么需要Vue? 前端开发存在的问题? 其一,需求变化频率更高 产品功能迭代前端肯定需要跟着调整. 提意见的人多,前端嘛谁都能看得见,所以,谁都可以指手画脚提一点意见.产品经理.项目经理.老 ...
- 字符串截取 slice，substr，substring 的区别
一 只传递一个参数时候 let str = '0123456'; str.slice(5); //'56' str.substr(5); // '56' str.substring(5); // '5 ...
- Disruptor 使用简介
[开发总结]Disruptor 使用简介 在极客时间看到王宝令老师关于 Disruptor 的一篇文章,觉得很有意思.看完之后又在网上找到一些其他关于Disruptor 的资料看了一下. 现在写篇文章 ...
- C#数据结构-线程安全队列
什么是线程安全? 答:线程安全是多线程编程时的计算机程序代码中的一个概念.在拥有共享数据的多条线程并行执行的程序中,线程安全的代码会通过同步机制保证各个线程都可以正常且正确的执行,不会出现数据污染等意 ...
- model基础操作（下）
3.Django多对多表结构操作 3.1 第一种: ManyToManyField 自己不创建第三张关系表,有m2m字段: 根据queryset对象增删改查(推荐) from django ...
- 什么是 session 和 cookie
cookie 大家应该都熟悉,比如说登录某些网站一段时间后,就要求你重新登录:再比如有的同学很喜欢玩爬虫技术,有时候网站就是可以拦截住你的爬虫,这些都和 cookie 有关.如果你明白了服务器后端对于 ...
- 6.1 接口 - 6.3 lambda表达式
6.1 接口 接口概念 接口是对类的一组需求描述,这些类要遵从接口描述的统一格式进行定义.设计目的是解决多继承的问题 接口中所有方法时 public 不用现实声明 java.lang.Comparab ...