关于jquery所有动画都有速度和动画的方向(在宽度方向上的动画)?
不只是jquery的 animate 动画, 才有时间的 参数, 实际上, 在所有的动画中, 包括: show/hide/toggle, slideup/slidedown/slidetoggle, fadein/fadeout/fadeto, animate 等, 都有速度(即动画切换速度时间)参数. 即所有的动画都有: speed, ease, callbackFn 三个参数.
不要以为只有jquery的动画只有 "垂直方向", 实际上, 在水平方向上的动画是 一样的, 也可以实现, 那就是,, 通过animate的 "width: 变化来实现"..
动画 的组合? 你可以在一个 动画中, 同时实现多个参数的改变, 那么这时后, 这些选项参数的改变是同时的, 如width 和 height 同时改变; 但是 有时候, 却需要 多个选项, 多个参数的改变, 不是同时的, 而是一个一个的发生的, 即前面一个 height 高度 实现动画完成后, 然后再让 width宽度 实现动画 改变. 这就要看你的实际需求了...
关于多个事件的切换? 直接就提供了两个方法, 一个是 hover(在over, out之间切换), 一个是toggle(f1, f2, f3, f4....). 这个hover就整合了 mouseover 和 mouseout两个事件. 它实际生活就相当于 两个事件的 toggle! 是一种特殊形式 toggle.
关于filter的用法
filter是过滤出 符合 后面的表达式 的元素(或元素集合). filter过滤出的是我们要保留的结果: 其中 过滤表达式 "可以" 是多个表达式, 相互之间用 逗号隔开, 注意,这些过滤表达式, 是 "或" "or" 的关系, 不是"与 and"的关系. 不是说这些过滤表达式要同时满足, 才能得到结果, 而是说只要 满足其中 任意 一个过滤表达式的 元素 都将被筛选出来.jquery中的options选项的 格式, {attr, value} , 前面的 attr表示的是属性名称 , 这里是表示的关键字, 所以不用加引号. 这个跟json格式 字符串不同!
‵ $(':not(:animated'), filter(':not(:animated)') ` , 中的 :animated表示 正在 执行动画的元素, 其中的 animated 是表示被动语态, 而不是表示 完成时
jquery 中的 选择器, 即$ 括号中的 内容, 不管有 多少, 都只是 用一个 引号. 不必添加单引号 双引号什么的!
关于 hover显示和隐藏 的思路 的扩展!! 很重要!!
既要重视以前的 hover方法, 但是, 也要 避免 "什么都是hover, 只要一看到 显示和隐藏就是 hover" 的这种思想!
以前我们都是 将 "触发"和 "显示的" 部分作为 两个部分来 做的,可以这么做, 并不是不可以, 那么这时后, 就要注意处理 触发和显示两部分之间的 空白过渡区域.
(markdown的列表, 并不是不可以换行的! 只要换行中不包括 空白行就可以! 因为 在markdown中 , 空白行表示的是 "段落"! 只要没有空白行, 就表示始终是同一个段落!)但是前面的第一种方法 总是有些 麻烦 "不优雅", 很别扭的. 所以可以使用第二种思路: 将"触发 和 显示" 部分, 作为一个 整体 部分 , 把它们放在 同一个div中, 然后
使用animate来 控制 水平方向的width/ 垂直方向上用height 动画, 而且动画的width和height 就不显示或隐藏 完了, 只是到 "触发部分"就好了!! 这样就很好的解决了触发和显示 部分之间的 过渡地段 的问题.总之, 就是 不管触发和 显示区域的大小是否相同, 总是可以把 它们放在一起, 都放在一个div中 来进行显示的. 三个选择: 一是 可以将触发和显示作为 并列元素, 二是将 触发和显示 放在一个div 大的容器中(这是最常用的方式); 三是将触发和 显示 都分别作为 一个div, 放到一个父div中. 反正根据需要来看 . 因为 , 一个div 中包含 的 子元素, 不一定尺寸(宽度和高度)都是一样 的 . 即使 包含的子元素的 宽 高 不一样, 也可以作为一个整体 来进行设置!
不管是采用 哪种方法, 如果出现问题, 总是考虑: 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所有动画都有速度和动画的方向(在宽度方向上的动画)?的更多相关文章
- JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 (转)
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
- 微信小程序开发动感十足的加载动画--都在这里!
代码地址如下:http://www.demodashi.com/demo/14242.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 用HTML和CSS实现WWDC 2015上的动画效果
用HTML和CSS实现WWDC 2015上的动画效果 动画效果WWDC 2015 原文:https://cssanimation.rocks/wwdc15/ 译者:周晓楷(@Helkyle) 每年 ...
- 用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示。
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...
- Unity3D之Mecanim动画系统学习笔记(七):IK(反向动力学)动画
什么是IK? IK(Inverse Kinematics)即反向动力学,即可以使用场景中的各种物体来控制和影响角色身体部位的运动,一般来说骨骼动画都是传统的从父节点到子节点的带动方式(即正向动力学), ...
- css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。
transitions(过渡) 被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值. 主要包括四个属性: 执行变换的属性:transition-property 变换延续的时间: ...
- Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果)
Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果) 首句依然是那句老话,你懂得! finddreams :(http://blog.csdn.net/finddr ...
- IOS 暂停和恢复CALayer上的动画(转)
coreAnimation的动画是存在于CALayer上面的,有些时候需要突然暂停某个组件的动画效果,同时保留当前动画的状态, 如果是用removeAnimation会显得很突兀,不够平滑,所以可以利 ...
- 发布上线前,先小秀一把俺的64位浏览器,速度那觉对是杠杠滴,上youtube,上google不费劲
发布上线前,先小秀一把俺的64位浏览器,速度那觉对是杠杠滴,上youtube,上google不费劲
随机推荐
- HTML_css选择器
第二种增加css样式的方法,可以在head中增加style标签,style中通过选择器定位标签增加css样式 CSS选择器分为六种: 1.id选择器 2.class选择器 3.标签选择器 4. ...
- 共享访问在.NET中的编程实现
转载:http://blog.csdn.net/zhzuo/article/details/1732937 共享访问在.NET中的编程实现 发布日期:2007-08-08 | 更新日期:2009-03 ...
- 代码实现SQL SERVER TCP/IP协议配置
代码实现SQL SERVER TCP/IP协议配置 SET NOCOUNT ON ) ,) ,) SET @Root = 'HKEY_LOCAL_MACHINE' SET @Path = 'Softw ...
- 什么是 Delta 文件
什么是 Delta 文件 Delta 文件应用很广泛,特别是在数据库领域 What Is a Delta File? During most computer operations, copying, ...
- POJ3169:Layout(差分约束)
http://poj.org/problem?id=3169 题意: 一堆牛在一条直线上按编号站队,在同一位置可以有多头牛并列站在一起,但编号小的牛所占的位置不能超过编号大的牛所占的位置,这里用d[i ...
- 手工利用Chrome浏览器“Javascript控制台”
1.打开Chrome浏览器,输入网址:http://forum.csdn.net/SList/HTMLCSS/ 2.按下“Ctrl+Shift+J”打开“Javascript控制台”工具 3.动态引用 ...
- windows下编译和安装boost库
boost是一个功能强大.构造精巧.跨平台.开源并且完全免费的C++程序库. 获取方式 boost提供源码形式的安装包,可以从boost官方网站下载,目前最新版本是1.59.0. 本机上正好有boos ...
- Jmeter CSV Data Set Config参数化
在使用Jemeter做压力测试的时候,往往需要参数化用户名,密码以到达到多用户使用不同的用户名密码登录的目的.这个时候我们就可以使用CSV Data Set Config实现参数化登录: 首先通过Te ...
- Android弹性滑动的三种实现方式
引言 上一篇文章我们介绍了实现弹性滑动的三种方式,但仅仅是给出了代码片段和方法理论.今天我们结合一个具体的例子来谈一下如何使用这三种方法来实现弹性滑动.今天我们的例子是仿IOS的下拉操作,我们知道An ...
- Q_UNUSED
Q_UNUSED() 没有实质性的作用,用来避免编译器警告 void func( int a) { Q_UNUSED(a); //函数体内没有使用a,避免编译器警告 }