在jQuery中出了基本的动画之外，还有用户 可以自定义的函数,Animate()

用于创建自定义动画的函数。

apI上指出：

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

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

在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

jQuery 1.3中，如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。

paramsOptions

一组包含作为动画属性和终值的样式属性和及其值的集合

duration (可选)String,Number

三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing (可选)String

要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

callback (可选)Function

在动画完成时执行的函数

<script src="js/jQuery1.11.1.js" type="text/javascript"></script>

    <script>

        $(function () {

            $("p").click(function () {                      //点击显示图片

                $("img").animate({ width: "20%" }, 2000)   //图片2秒后展示图片宽度

                .animate({ height: "30%" });               //执行完第一个animate才会执行第一个

            });

        });

    </script>

</head>

<body>

    <p>点击显示</p>

    <img src="data:images/6.jpg" style="display:none"/>

</body>

A： 也可以使用queue关键字让每个属性同时进行

 $("p").click(function () {                      //点击显示图片

                $("img").animate({ width: "20%" }, 2000)   //图片2秒后展示图片宽度

                .animate({ height: "30%" },{queue:false,duration:2000});  //这样width和height属性  就会同时产生动画效果

            });

B：

在600毫秒内切换段落的高度和透明度

jQuery 代码:
$("img").animate({

   height: 'toggle', opacity: 'toggle'

 }, "slow");

C:

用600毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）

jQuery 代码:
 $("img").animate({

                left: 150, opacity: 'show'

            }, 600

            );

Animate自定义动画的更多相关文章

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

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

  2. 自定义动画animate()

    在上一节总结了一下3中类型的动画,其中show()和hide()方法会同时修改元素的多个属性,fadeOut()和fadeIn()方法只会修改元素的不透明度,而slideDown()和slideUp( ...

  3. js进阶 13-4 jquery自定义动画animate()如何使用

    js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...

  4. 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动

    查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...

  5. Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析

    这是关于RecyclerView的第二篇,说的是如何自定义Item动画,但是请注意,本文不包含动画的具体实现方法,只是告诉大家如何去自定义动画,如何去参考源代码. 我们知道,RecyclerView默 ...

  6. 深入学习jQuery自定义动画

    × 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...

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

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

  8. Android 5.0自定义动画

    材料设计中的动画对用户的操作给予了反馈,并且在与应用交互时提供了持续的可见性.材料主题提供了一些按钮动画和活动过渡,Android 5.0允许你自定义动画并且可以创建新的动画: Touch Feedb ...

  9. iOS 8自定义动画转场上手指南

    原文:http://www.cocoachina.com/ios/20150126/11011.html iOS 5发布的时候,苹果针对应用程序界面的设计,提出了一种全新的,革命性的方法—Storyb ...

随机推荐

  1. IOS开发－UI学习－UISlider（滑动条）的使用

    滑动条即UISlider,是我们常见的软件中设置音量,亮度等的滑条,初始化及基本设置如下: // 新建滑动条 UISlider *slider = [[UISlider alloc]initWithF ...

  2. 为什么建立TCP连接需要三次握手，为什么断开TCP连接需要四次握手，TIME_WAIT状态的意义

    为什么建立TCP连接需要三次握手? 原因:为了应对网络中存在的延迟的重复数组的问题 例子: 假设client发起连接的连接请求报文段在网络中没有丢失,而是在某个网络节点长时间滞留了,导致延迟到达ser ...

  3. mysql,mybatis使用中遇到的类型转化的问题

    产生原因还没有明白,先记录一下. 使用DATEDIFF函数,计算两个日期的时间差.在mybatis中,resultType 是map.在代码中,根据map的key取值的时候. 在mysql 5.5.3 ...

  4. partial类修饰符

    partial是一个类修饰符,用于把类定义拆分为几个部分,便于代码管理,如class ClassA{void A(){;}void B(){;}}与partial class ClassA{void ...

  5. Spring Security——核心类简介——获得登录用户的相关信息

    核心类简介 目录 1.1     Authentication 1.2     SecurityContextHolder 1.3     AuthenticationManager和Authenti ...

  6. spark中数据的读取与保存

    1.文本文件 (1)读取文本文件 JavaRDD<String> input =sc.textFile(dir) (2)保存文本文件 result.saveAsTextFile(dir)) ...

  7. 1.3.1. 新建Xcode项目并设置故事板（Core Data 应用程序实践指南）

    创建名为Grocery Dude的Single View程序,并按默认设置处理,不勾选Core Date 和 Git. 设计故事板: 选择Main.Storyboard 拖放一个 Table View ...

  8. java 调用webservice的各种方法总结,wsimport方法总结

    http://www.blogjava.net/zjhiphop/archive/2009/04/29/webservice.html wsimport生成webservice客户端: wsimpor ...

  9. 【Zookeeper】源码分析之Watcher机制（三）之Zookeeper

    一.前言 前面已经分析了Watcher机制中的大多数类,本篇对于ZKWatchManager的外部类Zookeeper进行分析. 二.Zookeeper源码分析 2.1 类的内部类 Zookeeper ...

  10. 【puthon基础】之str类字符串

    str类字符串是不可变对象 1.创建字符串 s1 = str() #创建一个空字符串 s2 = str("hello") #创建字符串"hello" 2.处理字 ...