定义:

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:

  1. backgroundPosition
  2. borderWidth
  3. borderBottomWidth
  4. borderLeftWidth
  5. borderRightWidth
  6. borderTopWidth
  7. borderSpacing
  8. margin
  9. marginBottom
  10. marginLeft
  11. marginRight
  12. marginTop
  13. outlineWidth
  14. padding
  15. paddingBottom
  16. paddingLeft
  17. paddingRight
  18. paddingTop
  19. height
  20. width
  21. maxHeight
  22. maxWidth
  23. minHeight
  24. minWidth
  25. font
  26. fontSize
  27. bottom
  28. left
  29. right
  30. top
  31. letterSpacing
  32. wordSpacing
  33. lineHeight
  34. textIndent

注意:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。

2、speed

动画速度,默认是“normal”

可以是“毫秒”“slow”“fast”

3、easing

规定动画的数度

“swing”“linear”

4、callbank

animate()函数执行完之后要执行的函数

animate动画基础的更多相关文章

  1. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  2. iOS开发UI篇—核心动画(基础动画)

    转自:http://www.cnblogs.com/wendingding/p/3801157.html 文顶顶 最怕你一生碌碌无为 还安慰自己平凡可贵 iOS开发UI篇—核心动画(基础动画) iOS ...

  3. 解决animate动画连续播放bug

    在animate动画中,如果几个div之间频繁切换,会导致鼠标移开后,动画仍在继续,解决方法有两个 一个,判断当前是否在运行动画: if(!$(".block").is(" ...

  4. 《Programming WPF》翻译 第8章 1.动画基础

    原文:<Programming WPF>翻译 第8章 1.动画基础 动画包括在一段时间内改变用户界面的某些可见的特征,如它的大小.位置或颜色.你可以做到这一点,非常困难的通过创建一个tim ...

  5. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  6. 【2017-04-01】JS字符串的操作、时间日期的操作、函数、事件、动画基础

    一.字符串的操作 1.转大写: s.toLowerCase(); 2.转大写: s.toUpperCase(); 3.字符串的截取: s.substr(3,4);      -从索引3开始截取,截取4 ...

  7. jquery IE6 下animate 动画的opacity无效

    jquery IE6 下animate 动画的opacity无效,其实是有效的,因为IETester的一个小BUG 原生IE6 没问题...呵呵~~

  8. 炫丽的倒计时效果Canvas绘图与动画基础

    前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...

  9. 动画基础--基于Core Animation(3)

    参考:https://zsisme.gitbooks.io/ios-/content/ 前面的文章动画基础--基于Core Animation(1),动画基础--基于Core Animation(2) ...

随机推荐

  1. vue全家桶(2.7)

    3.11.1.vue-router中的全局钩子函数 在vue-router中,路由发生变化,我们可以做一些事情,例如:可以决定是否进入导航,可以决定跳转到哪里,官方文档中又叫做导航守卫 首先来看一个全 ...

  2. JQuery 优缺点略谈

    1.jQuery实现脚本与页面的分离 ; 2.最少的代码做最多的事情; 3.性能; 在大型JavaScript框架中,jQuery对性能的理解最好.尽管不同版本拥有众多新功能,其最精简版本只有18KB ...

  3. 计算机组成原理Day-1

  4. oracle 环境变量配置 字符集编码配置

    字符编码的环境变量配置: http://jingyan.baidu.com/article/e73e26c0c20f1a24adb6a73e.html (1).数据库服务器字符集select * fr ...

  5. 洛谷 P1347 【排序】

    这篇题解没有用拓补排序 (嗐 菜就直说) 个人感觉这道题拓补排序没有变种\(Floyd\)好写吧,思维难度也低一点(亲眼目睹机房dalao这道题拓补排序调了很久). 吐槽结束,开始正题~ 对于这道题为 ...

  6. 【经验】GaussDB(for MySQL)性能优化 —— 日志的“快递驿站”

    GaussDB(for MySQL)数据库在写入性能上,在业界同类产品中是最好的,这主要得益于GaussDB(for MySQL)在MySQL内核方面的诸多优化.其中有一项从“送快递”得来灵感的优化— ...

  7. CentOS/RHEL 6.4/5.9 安装 Adobe Flash Player 11.2

    1.root登录: $ su 2.安装 Adobe YUM Repository RPM package X86_64 ________________________________________ ...

  8. Poj 3613 Cow Relays (图论)

    Poj 3613 Cow Relays (图论) 题目大意 给出一个无向图,T条边,给出N,S,E,求S到E经过N条边的最短路径长度 理论上讲就是给了有n条边限制的最短路 solution 最一开始想 ...

  9. 02 . SaltStack高级用法(Python API)

    Python API简单使用 第一条命令 /usr/bin/salt默认使用的接口是LocalClient,该接口只能在salt master上使用 >>> import salt. ...

  10. 蜂鸟E203系列——Linux开发工具

    欲观原文,请君移步 Vivado安装 vivado是运行工程的工具,所以必须安装 后台回复[vivado2017]可获取vivado 2017.4 | 后台回复[vivado2020]可获取vitis ...