定义:

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. dart快速入门教程 (7.3)

    7.4.抽离类为单独文件 新建一个文件,单独存放一个类,例如:Person类抽离到person.dart文件中 class Person { final String name; final num ...

  2. 《UNIX环境高级编程》(APUE) 笔记第七章 - 进程环境

    7 - 进程环境 Github 地址 1. main 函数 C 程序总是从 main 函数 开始执行: int main(int argc, char *argv[]); \(argc\) 为命令行参 ...

  3. [CEOI1999]Parity Game 题解

    P5937 [CEOI1999]Parity Game 洛谷P5937 P5937 [CEOI1999]Parity Game 前言: 个人感觉这道题初看想不到并查集啊!(说实话我题都没读懂,第二遍才 ...

  4. Mybatis 动态insert语句

    mybatis的一个比较先进的思想是把Sql语句写在了配置xml文件(也支持注解),通过配置文件的方式,免去了一般软件开发的硬编码,当业务需求改变的时候,只需要更改sql语句即可! 下面是个人在学习m ...

  5. Spring Boot入门系列(十七)整合Mybatis,创建自定义mapper 实现多表关联查询!

    之前讲了Springboot整合Mybatis,介绍了如何自动生成pojo实体类.mapper类和对应的mapper.xml 文件,并实现最基本的增删改查功能.mybatis 插件自动生成的mappe ...

  6. python使用selenium和requests.session登录抓取

    # Author:song from selenium import webdriver from selenium.webdriver.common.keys import Keys from re ...

  7. 主存到Cache直接映射、全相联映射和组相联映射

    转自:https://blog.csdn.net/dongyanxia1000/article/details/53392315 ---- Cache的容量很小,它保存的内容只是主存内容的一个子集,且 ...

  8. CSS Sprites精灵图(雪碧图)

    简介 CSS精灵图,是一种网页图片应用处理方式.允许将一个页面涉及到的所有零星图片都包含到一张大图中 利用CSS的"background-image","backgrou ...

  9. RESTful API 规范(一)

    一,简介 DRF 即Django rest framework 二,rest 规范 1 协议 API 与用户通信,总是使用https协议 2 域名 1) 应尽量将API 部署在域名下(这种情况会存在跨 ...

  10. 树的子结构(剑指offer-17)

    题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 解析 解答 /** public class TreeNode { int val = 0; Tr ...