animate的使用方法：animate(params,speed,callback);

例子：animate({ right: "-=600px",height:"+=400px" }, "slow", function () { $(this).css("border","5px solid red")});

其中right向左，left向右,height高度变化，width宽度变化.

+=表示在当前位置向left/right或则将height/width增加xx像素。“slow”表示速度，也可以自己制定时间，3000表示3000毫秒。

最后一个是回掉函数，表示在动画结束后，再执行的操作。

示例代码，将一个id为block的div框，将它向右移动600px，同时高度增加400px.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <script src="jquery-1.3.2.min.js"></script>

    <link href="style.css" rel="stylesheet" type="text/css" />

    <script>

        $(document).ready(function () {

            $("#block").click(function () {

                $(this).animate({ right: "-=600px", height: "+=400px" }, "slow", function () { $(this).css("border","5px solid red")});

            });

        });

    </script>

    <style>

        #block {

            margin-left:500px;

            height: 300px;

            width: 300px;

            position:absolute;

            background-color: blue;

        }

    </style>

    <title></title>

</head>

<body>

    <div id="block"></div>

</body>

</html>

自定义动画方法animate的更多相关文章

  1. 自定义动画方法 animate()

    animate方法的语法结构为: animate(params,speed,callback); 参数说明: (1) params:一个包含样式属性及值的映射,比如{property:'value1' ...

  2. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  3. Day048--jQuery自定义动画和DOM操作

    内容回顾 BOM location.reload() 全局刷新页面 location.href location.hash location.pathname location.hostname lo ...

  4. JQuery基本选择器和基本动画方法总结

    刚开始接触JQuery是在大三的时候,那时候先学的Javascript,然后跳跃到JQuery,就一个字,爽.但因为之前用的不是太多,所以很多都忘了,直接导致的后果就是之前在一家公司面试,面试官问我要 ...

  5. javascript 自定义动画函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

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

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

  7. 自定义动画animate()

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

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

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

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

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

随机推荐

  1. 利用条件运算符的嵌套来完成此题：学习成绩> =90分的同学用A表示，60-89分之间的用B表示，60分以下的用C表示。

    利用条件运算符的嵌套来完成此题:学习成绩> =90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示. import java.util.Scanner; public clas ...

  2. Nodejs开源项目推荐

    当我们学习一门新语言,不要用以前语言的习惯去使用新的语言,这样可能会导致走一些弯路.最好的办法就是去看一些写的比较好的开源项目,所以这里我推荐几个NodeJs的开源项目,花点时间去研究一下他们的实现, ...

  3. 【转】安装OpenSSL缺失Microsoft Visual C++ 2008 Redistributables的解决方案

    from: http://www.cnblogs.com/luguo3000/p/3539815.html 在安装OpenSSL的时候通常会提示以下错误: "The Win32 OpenSS ...

  4. .net微信公众号开发——基础接口

    作者:王先荣    本文讲述微信公众号开发中基础接口的使用,包括以下内容:    (1)获取许可令牌(AccessToken):    (2)获取微信服务器地址:    (3)上传.下载多媒体文件:  ...

  5. __getattribute__()、__getattr__()、__setattr__()、__delattr__()

    访问顺序: 实例的__getattribute__().Descriptor的__get__().实例的__dict__.只读Descriptor的__get__().实例的__getattr__() ...

  6. System.Net.WebException : The remote server returned an error: (415) UNSUPPORTED MEDIA TYPE

    I am having problems with a bit of code that accesses a restful web service. Running this code, it e ...

  7. 关于创建可执行的jar文件(assembly)

    java利用maven生成一个jar包,如何自动生成清单属性文件(MANIFEST.MF),如何解决jar依赖问题? 办法很简单: 只需在pom.xml文件中配置如下plugin即可: <plu ...

  8. JS - IE or not:判断是否为IE浏览器方法

    问题:使用JS判断是否为IE浏览器 方法: 1.IE='\v'=='v'  (失败!) if('\v'=='v') // true only in IE 2.IE=(!+"\v1" ...

  9. java之容器

    先来一张容器的API框架图,我们在java中所学的所有知识,都是根据下面这张图来学习的.... 容器API: 1.Collection接口------定义了存储一组对象的方法,其子接口Set和List ...

  10. 二十二、【轻量级开源框架】EFW框架Web前端开发之JqueryEasyUI

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...