一、jQuery animate() 方法用于创建自定义动画。

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

<script src="jquery-1.11.1.min.js"></script>
<script>
    $(function(){
        $("div").animate({
            top:'500px'/*css样式里加上display:block和首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。*/
        });
    });
</script>
</head>
<body>
    <div style="height:100px; width:200px; border:2px solid #0F0; position:relative; background:red; display:block"></div>
</body>

默认地,所有 HTML 元素都有一个静态位置,且无法移动。如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

二、jQuery animate() - 操作多个属性

生成动画的过程中可同时使用多个属性:

<script src="jquery-1.11.1.min.js"></script>
<script>
    $(function(){
        $("div").animate({
            left:'250px',
              opacity:'0.5',
              height:'150px',
              width:'150px',
            fontSize:'30px'
        });
    });
</script>
</head>
<body>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body>

几乎所有的css属性都可以设置不过,需要记住的是当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。

色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。

三、jQuery animate() - 使用相对值

也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

<script src="jquery-1.11.1.min.js"></script>
<script>
    $(function(){
        $("div").animate({
            left:'250px',
              opacity:'0.5',
              height:'+=100px',/*可以使用这种方法给其设置值*/
              width:'+=150px',
            fontSize:'+=30px'
        });
    });
</script>
</head>
<body>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body>

四、jQuery animate() - 使用预定义的值

可以把属性的动画值设置为 "show"、"hide" 或 "toggle":

<script src="jquery-1.11.1.min.js"></script>
<script>
    $(function(){
        $("div").animate({
            height:'toggle'
        });
    });
</script>
</head>
<body>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body>

五、jQuery animate() - 使用队列功能

如果在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

<script src="jquery-1.11.1.min.js"></script>
<script>
    $(function(){
            var div=$("div");
            div.animate({left:'400px',opacity:'0.5',height:'+=500px',width:'+=550px',fontSize:'+=100px'},'show');
            div.animate({left:'100px',opacity:'0.5',height:'100px',width:'150px',fontSize:'20px'},'show');
            div.animate({left:'400px',opacity:'0.5',height:'+=700px',width:'+=750px',fontSize:'+=120px'},'show');
            div.animate({left:'100px',opacity:'0.5',height:'100px',width:'150px',fontSize:'20px'},'show');
    });
</script>
</head>
<body>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body>
<script src="jquery-1.11.1.min.js"></script>
<script>
    $(function(){
            var div=$("div");
            div.animate({left:'400px',opacity:'0.5',height:'+=100px',width:'+=150px'},'show');
            div.animate({fontSize:'3em'},'show');
    });
</script>
</head>
<body>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body>

jQuery 动画 _animate() 方法的更多相关文章

  1. jQuery动画animate方法使用介绍

    用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“togg ...

  2. jquery 动画总结(主要指效果函数)

    动画无非两类:帧动画frame和变形动画tween,以及3d动画.不论web还是安卓苹果app,动画原理都是这些. web app 动画实现的途径,无非这几种:1 gif动画---这就是帧动画,把若干 ...

  3. Jquery动画方法 jquery.animate()

    目前在学习Oracle数据库,由于刚接触,学校让练习练习HTML内容,就想起了老师以前提起过的animate方法 animate是jquery的一个方法,这个方法主要功能是能实现比较平滑的动态效果,所 ...

  4. JQuery动画animate的stop方法使用详解

    JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...

  5. jQuery动画方法

    下面介绍一些使用jQuery实现动画的方法: html中有如下代码: <button id="btn-box1">show</button> <but ...

  6. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  7. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  8. jquery动画,基础以及我发现的新大陆

    $.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...

  9. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

随机推荐

  1. 1051: [HAOI2006]受欢迎的牛

    1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2276  Solved: 1190[Submit][Sta ...

  2. 在JavaScript中判断整型的N种方法

    原文:http://www.cnblogs.com/YcYYcY/p/3759184.html 整数类型(Integer)在JavaScript经常会导致一些奇怪的问题.在ECMAScript的规范中 ...

  3. Apache CXF实现Web Service(1)——不借助重量级Web容器和Spring实现一个纯的JAX-WS web service

    废话少说,先在Eclipse中新建一个Java Project (可以不是WTP的Dynamic Web Project) 选择Java Project 再看pom.xml 我们使用cxf 3.1.4 ...

  4. php弱类型

    此处写ctf中遇到的==和md5值为0e**的应用. 数组和字符的===   ==

  5. java cookie

    public static void AddCookie(HttpServletResponse response, String key, String value) { Cookie cookie ...

  6. VS2010中打开VS2013/VS2012项目

    VS2010中打开VS2013/VS2012项目 (2014-04-03 23:47:53) 转载▼   分类: IT VS低版本打开高版本创建的项目时会提示"选择的文件是解决方案文件,但是 ...

  7. fuel openstack 在 VirtualBox 上的部署

    搞了两天,终于搞好了.说说过程: 一开始用的6.1版本的Fuel.iso,按照国内外的教程装了几遍,但是网路验证始终不能通过.自己又不是很懂网络.后来在网上看到说6.1版的需要fuel-master连 ...

  8. 李洪强iOS开发之【Objective-C】07-自定义构造方法和description方法

    知识回顾 在前面已经介绍了如何定义类和创建并初始化对象,比如有Student这个类 1.Student.h 1 #import <Foundation/Foundation.h> 2 3 ...

  9. mybatis 打印日志log4j.properties

    log4j.rootLogger=DEBUG, Console #Console log4j.appender.Console=org.apache.log4j.ConsoleAppender log ...

  10. Linux下Boost交叉编译

    http://davidlwq.iteye.com/blog/1580752 运行环境:ubuntu 12.04, boost 1.50.0 由于要把boost移植到arm板上去,所以折腾了一下,后来 ...