1. 不只是jquery的 animate 动画, 才有时间的 参数, 实际上, 在所有的动画中, 包括: show/hide/toggle, slideup/slidedown/slidetoggle, fadein/fadeout/fadeto, animate 等, 都有速度(即动画切换速度时间)参数. 即所有的动画都有: speed, ease, callbackFn 三个参数.

  2. 不要以为只有jquery的动画只有 "垂直方向", 实际上, 在水平方向上的动画是 一样的, 也可以实现, 那就是,, 通过animate的 "width: 变化来实现"..

  3. 动画 的组合? 你可以在一个 动画中, 同时实现多个参数的改变, 那么这时后, 这些选项参数的改变是同时的, 如width 和 height 同时改变; 但是 有时候, 却需要 多个选项, 多个参数的改变, 不是同时的, 而是一个一个的发生的, 即前面一个 height 高度 实现动画完成后, 然后再让 width宽度 实现动画 改变. 这就要看你的实际需求了...

  4. 关于多个事件的切换? 直接就提供了两个方法, 一个是 hover(在over, out之间切换), 一个是toggle(f1, f2, f3, f4....). 这个hover就整合了 mouseover 和 mouseout两个事件. 它实际生活就相当于 两个事件的 toggle! 是一种特殊形式 toggle.

  5. 关于filter的用法
    filter是过滤出 符合 后面的表达式 的元素(或元素集合). filter过滤出的是我们要保留的结果: 其中 过滤表达式 "可以" 是多个表达式, 相互之间用 逗号隔开, 注意,这些过滤表达式, 是 "或" "or" 的关系, 不是"与 and"的关系. 不是说这些过滤表达式要同时满足, 才能得到结果, 而是说只要 满足其中 任意 一个过滤表达式的 元素 都将被筛选出来.

  6. jquery中的options选项的 格式, {attr, value} , 前面的 attr表示的是属性名称 , 这里是表示的关键字, 所以不用加引号. 这个跟json格式 字符串不同!

  7. ‵ $(':not(:animated'), filter(':not(:animated)') ` , 中的 :animated表示 正在 执行动画的元素, 其中的 animated 是表示被动语态, 而不是表示 完成时

jquery 中的 选择器, 即$ 括号中的 内容, 不管有 多少, 都只是 用一个 引号. 不必添加单引号 双引号什么的!

关于 hover显示和隐藏 的思路 的扩展!! 很重要!!

  1. 既要重视以前的 hover方法, 但是, 也要 避免 "什么都是hover, 只要一看到 显示和隐藏就是 hover" 的这种思想!
    以前我们都是 将 "触发"和 "显示的" 部分作为 两个部分来 做的,可以这么做, 并不是不可以, 那么这时后, 就要注意处理 触发和显示两部分之间的 空白过渡区域.
    (markdown的列表, 并不是不可以换行的! 只要换行中不包括 空白行就可以! 因为 在markdown中 , 空白行表示的是 "段落"! 只要没有空白行, 就表示始终是同一个段落!)

  2. 但是前面的第一种方法 总是有些 麻烦 "不优雅", 很别扭的. 所以可以使用第二种思路: 将"触发 和 显示" 部分, 作为一个 整体 部分 , 把它们放在 同一个div中, 然后
    使用animate来 控制 水平方向的width/ 垂直方向上用height 动画, 而且动画的width和height 就不显示或隐藏 完了, 只是到 "触发部分"就好了!! 这样就很好的解决了触发和显示 部分之间的 过渡地段 的问题.

  3. 总之, 就是 不管触发和 显示区域的大小是否相同, 总是可以把 它们放在一起, 都放在一个div中 来进行显示的. 三个选择: 一是 可以将触发和显示作为 并列元素, 二是将 触发和显示 放在一个div 大的容器中(这是最常用的方式); 三是将触发和 显示 都分别作为 一个div, 放到一个父div中. 反正根据需要来看 . 因为 , 一个div 中包含 的 子元素, 不一定尺寸(宽度和高度)都是一样 的 . 即使 包含的子元素的 宽 高 不一样, 也可以作为一个整体 来进行设置!

  4. 不管是采用 哪种方法, 如果出现问题, 总是考虑: stop(true, true), 或 $('selecctor'). filter(':not(:animated)'). 动画方法! 来消除 "动画积累"的问题!!

在jquery中, 凡是要用来测试的, 都[可以] 使用is 函数: is(expr | jquery obj| dom ele| fn). 其中的expr表达式, 是css selector选择器!! 如: $('selector').is('form', ':visible',....) 其中, :visible是 选择器, 是可见性 选择器!

在使用 jquery方法的时候, 要求options时一个 大括号引起的 map, 通常, 最后一个option后, 你可以加逗号, 也可以不加逗号, 但是对于ie, 有时候 如果你在 最后一项option的后面加了 逗号的话, 可能会产生 意外的 错误. 所以, 最好是 "最后一个option后, 不加逗号"

vim的标尺, 指的是, vim最底部的 指示当前光标所在的行数/列数 位置的 indicator. 这个就是标尺, 还是比较有用的. 它不同于 word 等中在最顶端的 虚线形式的标尺 ...

关于jquery所有动画都有速度和动画的方向(在宽度方向上的动画)?的更多相关文章

  1. JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 (转)

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  2. 微信小程序开发动感十足的加载动画--都在这里!

    代码地址如下:http://www.demodashi.com/demo/14242.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  3. 用HTML和CSS实现WWDC 2015上的动画效果

    用HTML和CSS实现WWDC 2015上的动画效果 动画效果WWDC 2015   原文:https://cssanimation.rocks/wwdc15/ 译者:周晓楷(@Helkyle) 每年 ...

  4. 用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

  5. Unity3D之Mecanim动画系统学习笔记(七):IK(反向动力学)动画

    什么是IK? IK(Inverse Kinematics)即反向动力学,即可以使用场景中的各种物体来控制和影响角色身体部位的运动,一般来说骨骼动画都是传统的从父节点到子节点的带动方式(即正向动力学), ...

  6. css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。

    transitions(过渡) 被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值. 主要包括四个属性: 执行变换的属性:transition-property 变换延续的时间: ...

  7. Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果)

    Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果) 首句依然是那句老话,你懂得! finddreams :(http://blog.csdn.net/finddr ...

  8. IOS 暂停和恢复CALayer上的动画(转)

    coreAnimation的动画是存在于CALayer上面的,有些时候需要突然暂停某个组件的动画效果,同时保留当前动画的状态, 如果是用removeAnimation会显得很突兀,不够平滑,所以可以利 ...

  9. 发布上线前,先小秀一把俺的64位浏览器,速度那觉对是杠杠滴,上youtube,上google不费劲

    发布上线前,先小秀一把俺的64位浏览器,速度那觉对是杠杠滴,上youtube,上google不费劲

随机推荐

  1. 分布式网格缓存Coherence简介

    Coherence企业级缓存(一) 特点 摘要:Oracle Coherence是一个企业级的分布式集群缓存框架.具有自管理,自恢复,高可用性,高扩展性等优良特点,在电信BOSS等项目中有很大的应用价 ...

  2. UIImage添加滤镜

    UIImage *image =[UIImage imageNamed:"]; NSArray *arr = [NSArray arrayWithObjects:@"CISRGBT ...

  3. 【论文阅读】Sliding Line Point Regression for Shape Robust Scene Text Detection

    一.整体网络结构              二.细节                                      n=7,(7+7)*2+4=32个channel 三.结果       ...

  4. Redis的五种数据结构的内部编码

    type命令实际返回的就是当前键的数据结构类型,它们分别是:string(字符串).hash(哈希). list(列表).set(集合).zset(有序集合),但这些只是Redis对外的数据结构. 实 ...

  5. spring boot 使用静态资源

    ./ 当前目录../ 父级目录/ 根目录 spring boot 打包时: The default includes are as follows: 默认包括的文件 public/**, resour ...

  6. Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources-plugin:2.6 or one of

    eclipse在build maven项目的时候报错, 原来是Windows------->preference----->maven----------->usesettings配 ...

  7. 7.10 Models -- Handling Metadata(处理元数据)

    1. 随着从store中返回的records,你可能需要处理一些元数据.Metadata是伴随着特定model或者type的一种数据,而不是record. 2. 分页是使用元数据的一个常见的例子.想象 ...

  8. Acrobat 无法在本页面上执行OCR识别

    下载的电子书有时不能选中,或作黄色标记,在用acrobat pro作文本识别时,报 Acrobat 无法在本页面上执行OCR识别 解决方法 参照 http://jingyan.baidu.com/ar ...

  9. EL—表达式

    El的数据访问操作: 1:获取变量名(四大作用域中的变量?六大作用域?) 只能从这六个区域中拿数据!!! 2:获取对象的属性值 3:获取集合元素 4:执行表达式 1:获取变量名(四大作用域中的变量) ...

  10. STA分析(三) cmos模型

    CMOS集成电路的基本结构是以P型材料作为衬底(p-substrate),直接生成NMOS, 同时增加N肼(n-well),在其上制造PMOS. 增加两个bulk(P+,N+)防止非MOS管内的PN结 ...