.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. 计蒜客A

      联想公司最近要设计一个体现公司文化的 logo.联想的设计师想出了一个方案:先画了一个顶点 O,接着画出以顶点 O 为公共顶点的.夹角为 θ的两条线段 l1​​ 和 l2 其中 l1作为圆 C1的 ...

  2. iOS原生APP与H5+JS交互////////////////////zzzz

    原生代码中直接加载页面 1.    具体案例 加载本地/网络HTML5作为功能介绍页 2.    代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webView ...

  3. C#调用windows API的一些方法

    使用C#调用windows API(从其它地方总结来的,以备查询) C#调用windows API也可以叫做C#如何直接调用非托管代码,通常有2种方法: 1.  直接调用从 DLL 导出的函数. 2. ...

  4. WSF脚本详解:组合JS和VBS代码

    1.概述 Windows Script Host除了提供一个对象模型之外,还提供了一种脚本框架,这就是WSF脚本.通过WSF约定的标记元素,可以将多种脚本语言写的代码块组合起来,完成任务.除此之外,还 ...

  5. Java Garbage Collection基础详解------Java 垃圾回收机制技术详解

    最近还是在找工作,在面试某移动互联网公司之前认为自己对Java的GC机制已经相当了解,其他面试官问的时候也不存在问题,直到那天该公司一个做搜索的面试官问了我GC的问题,具体就是:老年代使用的是哪中垃圾 ...

  6. Java线程新特征——Java并发库

    一.线程池   Sun在Java5中,对Java线程的类库做了大量的扩展,其中线程池就是Java5的新特征之一,除了线程池之外,还有很多多线程相关的内容,为多线程的编程带来了极大便利.为了编写高效稳定 ...

  7. 在Ubuntu14.04_ROS_indigo上安装Kinect2驱动和bridge

    小乌龟:大乌龟,你这两周干么呢? 大乌龟:在Ubuntu14.04 ROS_indigo上装Kinect2的驱动和bridge 小乌龟:就装个驱动有什么难的 大乌龟:你说的对小乌龟,这确实不是问题,但 ...

  8. 精益化设计:把敏捷方法和Lean UX相结合

    敏捷方法已经成为了主流.同时,Kindle和iPhone等设备取得的巨大成功也推动了体验设计的飞速发展.不过,如何把敏捷方法和UX设计结合起来,一直以来都是一个难题.文章将探讨如何把UX融入到最流行的 ...

  9. Ajax.BeginForm()实现ajax无刷新提交

    1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...

  10. module not exists: xxxx Error in ThinkPHP

    Introduction ThinkPHP is a very charming PHP framework to easily build a website. It's structured in ...