animate动画基础
定义:
animate() 方法执行 CSS 属性集的自定义动画。
1、该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
2、只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。
3、注释:使用 "+=" 或 "-=" 来创建相对动画(relative animations)。
简单小实例:
//图片动画效果
function addEvent_3(){
third_imgDos.mouseover(function(){
$(this).stop().animate({
top:'-10px'
},'fast');//上移10px
}).mouseout(function(){
$(this).stop().animate({
top:'0px'//复原
},'fast');
});
}
注意:stop()
stop() 方法停止当前正在运行的动画。
加入stop(),防止动画在进行中出发多次,造成一种抖动感。
方式:
1、style:
- backgroundPosition
- borderWidth
- borderBottomWidth
- borderLeftWidth
- borderRightWidth
- borderTopWidth
- borderSpacing
- margin
- marginBottom
- marginLeft
- marginRight
- marginTop
- outlineWidth
- padding
- paddingBottom
- paddingLeft
- paddingRight
- paddingTop
- height
- width
- maxHeight
- maxWidth
- minHeight
- minWidth
- font
- fontSize
- bottom
- left
- right
- top
- letterSpacing
- wordSpacing
- lineHeight
- textIndent
注意:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。
2、speed
动画速度,默认是“normal”
可以是“毫秒”“slow”“fast”
3、easing
规定动画的数度
“swing”“linear”
4、callbank
animate()函数执行完之后要执行的函数
animate动画基础的更多相关文章
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
- iOS开发UI篇—核心动画(基础动画)
转自:http://www.cnblogs.com/wendingding/p/3801157.html 文顶顶 最怕你一生碌碌无为 还安慰自己平凡可贵 iOS开发UI篇—核心动画(基础动画) iOS ...
- 解决animate动画连续播放bug
在animate动画中,如果几个div之间频繁切换,会导致鼠标移开后,动画仍在继续,解决方法有两个 一个,判断当前是否在运行动画: if(!$(".block").is(" ...
- 《Programming WPF》翻译 第8章 1.动画基础
原文:<Programming WPF>翻译 第8章 1.动画基础 动画包括在一段时间内改变用户界面的某些可见的特征,如它的大小.位置或颜色.你可以做到这一点,非常困难的通过创建一个tim ...
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- 【2017-04-01】JS字符串的操作、时间日期的操作、函数、事件、动画基础
一.字符串的操作 1.转大写: s.toLowerCase(); 2.转大写: s.toUpperCase(); 3.字符串的截取: s.substr(3,4); -从索引3开始截取,截取4 ...
- jquery IE6 下animate 动画的opacity无效
jquery IE6 下animate 动画的opacity无效,其实是有效的,因为IETester的一个小BUG 原生IE6 没问题...呵呵~~
- 炫丽的倒计时效果Canvas绘图与动画基础
前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...
- 动画基础--基于Core Animation(3)
参考:https://zsisme.gitbooks.io/ios-/content/ 前面的文章动画基础--基于Core Animation(1),动画基础--基于Core Animation(2) ...
随机推荐
- vue全家桶(2.7)
3.11.1.vue-router中的全局钩子函数 在vue-router中,路由发生变化,我们可以做一些事情,例如:可以决定是否进入导航,可以决定跳转到哪里,官方文档中又叫做导航守卫 首先来看一个全 ...
- JQuery 优缺点略谈
1.jQuery实现脚本与页面的分离 ; 2.最少的代码做最多的事情; 3.性能; 在大型JavaScript框架中,jQuery对性能的理解最好.尽管不同版本拥有众多新功能,其最精简版本只有18KB ...
- 计算机组成原理Day-1
- oracle 环境变量配置 字符集编码配置
字符编码的环境变量配置: http://jingyan.baidu.com/article/e73e26c0c20f1a24adb6a73e.html (1).数据库服务器字符集select * fr ...
- 洛谷 P1347 【排序】
这篇题解没有用拓补排序 (嗐 菜就直说) 个人感觉这道题拓补排序没有变种\(Floyd\)好写吧,思维难度也低一点(亲眼目睹机房dalao这道题拓补排序调了很久). 吐槽结束,开始正题~ 对于这道题为 ...
- 【经验】GaussDB(for MySQL)性能优化 —— 日志的“快递驿站”
GaussDB(for MySQL)数据库在写入性能上,在业界同类产品中是最好的,这主要得益于GaussDB(for MySQL)在MySQL内核方面的诸多优化.其中有一项从“送快递”得来灵感的优化— ...
- CentOS/RHEL 6.4/5.9 安装 Adobe Flash Player 11.2
1.root登录: $ su 2.安装 Adobe YUM Repository RPM package X86_64 ________________________________________ ...
- Poj 3613 Cow Relays (图论)
Poj 3613 Cow Relays (图论) 题目大意 给出一个无向图,T条边,给出N,S,E,求S到E经过N条边的最短路径长度 理论上讲就是给了有n条边限制的最短路 solution 最一开始想 ...
- 02 . SaltStack高级用法(Python API)
Python API简单使用 第一条命令 /usr/bin/salt默认使用的接口是LocalClient,该接口只能在salt master上使用 >>> import salt. ...
- 蜂鸟E203系列——Linux开发工具
欲观原文,请君移步 Vivado安装 vivado是运行工程的工具,所以必须安装 后台回复[vivado2017]可获取vivado 2017.4 | 后台回复[vivado2020]可获取vitis ...