jquery基础学习之动画篇(四)
一,动画效果
hide() show() 隐藏与显示
hide(options) 隐藏 对应display:none,有参数就会变成动画,
$(document).click(function () {
// $('.div1').hide('slow');//慢速隐藏
})
hide(speed,callback)
toggle() 切换隐藏与显示
$(document).click(function () {
$('.div1').hide('slow',function () {
console.log(1)//完成后执行
//$('.div1').show('slow')//整个函数的意思是先隐藏,然后再显示,这句还能用下面的代替
$('.div1').toggle('slow')//取反
});
})
下拉与上卷动画
下拉动画 slideDown(speed,cb)
上卷动画slideUp(speed,cb)
$(document).click(function () {
$('.div2').add('.div3').slideUp(3000);
$('.div2').add('.div3').slideDown(3000);
})
slideToggle() 上卷下拉切换 同toggle()
淡入淡出动画 fadeIn fadeOut
这个设置的是元素的opacity
fadeIn(speed,cb)
fadeToggle() 淡入淡出切换 用法都相同
$(document).click(function () {
$('.div4').fadeToggle(3000);
})
fadeTo(speed,opacity,cb)
淡入效果停到某一个透明值,不像前两个要么是0,要么是1
$(document).click(function () {
$('.div5').fadeTo(3000,0.5);//让效果到0.5透明度
})
jQuery中toggle与slideToggle以及fadeToggle的比较
toggle,对应的是show,hide,改变display
slideToggle,对应的是slideDown,slideUp ,改变的是height
fadeToggle,对应的是fadeIn,fadeOut,改变的是opacity
注意:
基本用法:函数名(speed,cb)
这些动画设置的slow 200 fast 600 默认 400
这些动画的如果隐藏了会不占用文档空间
animate 更强大的动画功能
//animate(参数,speed,cb)
参数必须是数字,可以是个对象,里面各种键值对,样式名称用dom名称,比如font-size写成fontSize吗
使用队列功能,一个元素的好几个animate会逐条执行,比如参数设置了变化宽,高,颜色,那么它执行的时候会先变宽,然后高,然后颜色,而不会直接一步到位
所谓队列,就像排队买东西一样,先来的先买,买完走人离开队列,最后来的排到最后面
animate( properties, options )
如果多个元素执行动画,回调将在每个匹配的元素上执行一次,不是作为整个动画执行一次
stop 停止动画
stop() 动画队列如果有多个动画,停止当前执行的动画,开始下一个动画
stop(true) 真正的停止,当前动画停止,队列里后续动画也不执行
stop(true,true) 当前动画动作停止,并且直接展示所有动画完成后的最终状态
动画里的回调
因为动画是异步的,如果一个函数不是他的回调,会先函数后动画,如果是回调,会先执行动画后函数
jquery基础学习之动画篇(四)的更多相关文章
- jquery基础学习之事件篇(三)
一.鼠标事件 click 单击 与 dbclick 双击 用于监听用户的点击操作,在同一元素上同时绑定 click 和 dblclick 事件是不可取的...根据浏览器支持不同一个点击事件是由mous ...
- jquery基础学习之样式篇(一)
一.安装与使用 官网下载,然后引入 <script src="js/jquery-3.3.1.js"></script>,这是生产版本,开发版本替换成min ...
- jquery基础学习之AJAX篇(五)
理解不深,只知道这么用 jquery 中ajax的请求方法 $.ajax({ url:‘http://...’, //请求网址 type:'GET', //请求方法 success:function( ...
- jquery基础学习之DOM篇(二)
在此之前请牢记,jquery 是一个合集对象!!!! 1.节点创建 js创建方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHT ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
- jquery 基础汇总---导图篇
最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...
- Android基础夯实--重温动画(四)之属性动画 ValueAnimator详解
宝剑锋从磨砺出,梅花香自苦寒来:千淘万漉虽辛苦,吹尽狂沙始到金: 长风破浪会有时,直挂云帆济沧海 一.摘要 Animator类作为属性动画的基类,它是一个抽象类,它提供了实现动画的基本架构,但是我们不 ...
- jQuery基础学习
一.简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“Write ...
- 【jQuery基础学习】09 jQuery与前端(这章很水)
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
随机推荐
- 8个非常个性化的CSS3单/复选框
单选框和复选框在网页表单中应用十分广泛,但是浏览器默认自带的单选框和复选框样式不仅不统一,而且大多都比较简单丑陋.本文给大家介绍了一些基于CSS3的个性化单选框和复选框,一些选中动画是基于jQuery ...
- Brainfuck解析器(Python)
global cs global ip global ss #global sp global ds global bp global tab global out cs='++++++++++[&g ...
- 十分钟学会Charles抓包(iOS的http/https请求)
### 原文地址,感谢作者 : http://www.jianshu.com/p/5539599c7a25 Charles安装 HTTP抓包 HTTPS抓包 1. Charles安装 官网下载安装Ch ...
- 一个相对通用的JSON响应结构,其中包含两部分:元数据与返回值
定义一个相对通用的JSON响应结构,其中包含两部分:元数据与返回值,其中,元数据表示操作是否成功与返回值消息等,返回值对应服务端方法所返回的数据. public class Response { pr ...
- MUI 打包android app
自有证书生成方法 manifest配置 (2).图标配置:所有图片格式必须是png,且严格符合分辨率要求.使用其他图片格式重命名为png会导致打包失败.配置图标时选择自动生成所有适用图标,选择一个大图 ...
- 【转】Windows下charles 使用教程指南
1.下载就不用再说了,网上好多破解的安装包 2.下面是pc端的抓包使用情况 Charles支持抓去http.https协议的请求,不支持socket.然后charles会自动配置IE浏览器和工具的代理 ...
- Centos7 防火墙常用配置及说明
一. Centos7和Centos6 防火墙的区别: 使用的工具不一样了.Centos6 使用的是iptables ,Centos7 使用的是filewall iptables 用于过滤数据包,属于网 ...
- HttpWatch工具简介及使用技巧
一 概述: HttpWatch强大的网页数据分析工具.集成在Internet Explorer工具栏.包括网页摘要.Cookies管理.缓存管理.消息头发送/接受.字符查询.POST 数据和目录管理功 ...
- 转: jvm调优参数总结
JVM里的GC(Garbage Collection)的算法有很多种,如标记清除收集器,压缩收集器,分代收集器等等,详见HotSpot VM GC 的种类 现在比较常用的是分代收集(generatio ...
- [Python] Python 虚拟机 - virtualenv
virtualenv virtualenv 用于创建一个隔离的 Python 环境. 每个项目都有自己的依赖包,这些依赖包有时存在版本冲突,处理这种情况最好方法就是为每个项目创建一个专属的环境. 安装 ...