定义:

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. 如何通过Elasticsearch Scroll快速取出数据,构造pandas dataframe — Python多进程实现

    首先,python 多线程不能充分利用多核CPU的计算资源(只能共用一个CPU),所以得用多进程.笔者从3.7亿数据的索引,取200多万的数据,从取数据到构造pandas dataframe总共大概用 ...

  2. 数据库周刊28│开发者最喜爱的数据库是什么?阿里云脱口秀聊程序员转型;MySQL update误操作;PG流复制踩坑;PG异机归档;MySQL架构选型;Oracle技能表;Oracle文件损坏处理……

    热门资讯 1.Stackoverflow 2020年度报告出炉!开发者最喜爱的数据库是什么?[摘要]2020年2月,近6.5万名开发者参与了 Stackoverflow 的 2020 年度调查,这份报 ...

  3. 洛谷 P4047 [JSOI2010]部落划分

    这道题其实就是无线通讯网的双倍经验啦,只是在输出的时候不同罢了.还是一样的\(kruskal\)算法,但是在求的时候,应该在\(now=n-k+1\)的时候结束.本来到\(n-k\)就行了的,但是由于 ...

  4. Layer 3.0

    https://jeesite.gitee.io/front/layer/3.0/layer.layui.com/index.html

  5. Yarn的安装和全局配置(源/缓存位置/全局安装位置)

    本文安装环境: Win10 64位 前置条件: 已安装好Node环境(参考Node安装与环境配置) 下载和安装 Yarn安装包下载地址 全局配置 控制台输入命令, 正常显示版本表示安装成功 $ yar ...

  6. 基础设计模式-03 从过滤器(Filter)校验链学习职责链模式

    1.职责链路模式 1.1UML图 1.2 职责链路模式的概念 为了避免处理对象的耦合关系,将对象连成一个链,沿着这个链进行访问,直到有一个对象处理位置: 1.3 优点 1.按照一定的顺序执行判断: 2 ...

  7. Codeforces 1292C Xenon's Attack on the Gangs 题解

    题目 On another floor of the A.R.C. Markland-N, the young man Simon "Xenon" Jackson, takes a ...

  8. 洛谷 P1043 数字游戏 区间DP

    题目描述 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要赢得这个游戏并不那么容易.游戏是这样的,在你面前有一圈整数(一共n个),你要按顺序将其分 ...

  9. Azure Web App (一)发布你的Net Core Web 项目

    一,引言 今天我们看一下Azure上的一个服务-----Web 应用,我们都知道云计算的三大模式:Iaas(基础设施即服务),Paas(平台即服务),Saas(软件即服务). Iass,其实就是虚拟主 ...

  10. Navigation Nightmare POJ - 1984

    Navigation Nightmare Farmer John's pastoral neighborhood has N farms (2 <= N <= 40,000), usual ...