.animate(params,[speed],[easing],[fn])

params,[speed],[easing],[fn]Options,Number/String,String,FunctionV1.0
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数,每个元素执行一次。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});

$aaron.animate({
height: '50'
}, {
duration :2000,
//每一个动画都会调用
step: function(now, fx) {
$aaron.text('高度的改变值:'+now)
}
})

.stop( [clearQueue ], [ jumpToEnd ] )

.stop(); 停止当前动画,点击在暂停处继续开始
.stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
.stop(true,true); 当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值

  1. stop():只会停止第一个动画,第二个第三个继续
  2. stop(true):停止第一个、第二个和第三个动画
  3. stop(true ture):停止动画,直接跳到第一个动画的最终状态

jquery总结06-动画事件04-自定义动画的更多相关文章

  1. UI设计篇·入门篇·简单动画的实现,透明动画/旋转动画/移动动画/缩放动画,混合动画效果的实现,为动画设置监听事件,自定义动画的方法

    基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...

  2. jQuery中关于如何使用animate自定义动画

    动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一 ...

  3. jquery鼠标键盘悬停事件,形变动画和淡入淡出

    鼠标和键盘悬停 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. Android 动画效果 及 自定义动画

    1. View动画-透明动画效果2. View动画-旋转动画效果3. View动画-移动动画效果4. View动画-缩放动画效果5. View动画-动画效果混合6. View动画-动画效果侦听7. 自 ...

  5. jquery总结06-动画事件01-基础显示和隐藏

    动画事件 .hide(option) 动画隐藏  会保存元素的原始属性值 $("#a2").hide({ duration: 3000, complete: function() ...

  6. jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载

    jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...

  7. 【学习笔记】锋利的jQuery(三)事件和动画

    一.jQuery事件 1,加载事件 $(document).ready(function(){...}) //等同于$(function(){..}) $(window).load(function( ...

  8. jQuery里面的常用的事件和基础动画的实现

    一:了解jquery里面常用的事件 二:了解基础动画的实现 1:加载DOM 在JavaScript中使用window.onload事件作为窗体加载事件(它在页面所有数据加载完成之后才会执行) 在jQu ...

  9. python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

随机推荐

  1. DNS缓存

    有DNS的地方,就有缓存. 浏览器.操作系统.Local DNS.根域名服务器,它们都会对DNS结果做一定程度的缓存.本文总结一些常见的浏览器和操作系统的DNS缓存时间. Table of Conte ...

  2. Spark&Hive:如何使用scala开发spark访问hive作业,如何使用yarn resourcemanager。

    背景: 接到任务,需要在一个一天数据量在460亿条记录的hive表中,筛选出某些host为特定的值时才解析该条记录的http_content中的经纬度: 解析规则譬如: 需要解析host: api.m ...

  3. 注册Jdbc驱动程序的三种方式

    注册Jdbc驱动程序的三种方式 1. Class.forName("com.mysql.jdbc.Driver"); 2. DriverManager.registerDriver ...

  4. 一些CSS

    /*自定义*白烟*文本/边框/背景色*/ .text-whitesmoke,a.text-whitesmoke:link,a.text-whitesmoke:visited,.button.borde ...

  5. 易语言调用windows消息函数

    1.SendMessageCallbackA的调用方法 .版本2 .DLL命令 发送消息返回_, 整数型, "user32.dll", "SendMessageCallb ...

  6. 华盛顿大学 Programming Languages

    表达式三要素: 语法,类型和计算值.

  7. linux搭建微型git服务器

    1.安装git和git-core yum install git git-core -y 2.创建仓库 mkdir /home/git cd /home/git git init 3.设置可以远程pu ...

  8. 【004: gcc 和 clang 的简单比较】

  9. 增加SWAP空间的方法

    增加swap空间的方法 背景:安装oracle数据库需要,需要设置swap空间为16G,当前swap空间只有4G,需要增加12Gswap空间. 1.创建一个空文件 # dd if=/dev/zero ...

  10. 对于前端JS、Html、CSS的大小、位置是否影响网站的相应时间

    1.页面中大量的注释代码.空行会影响页面的加载速度 尽量去除打断的注释代码,及空行:尽可能的使用压缩后的JS.CSS文件,太小的文件没必要压缩 2.有人说CSS样式放在页面的开头,JS文件放在页面的结 ...