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. atom 安装插件出现 EIO 错误

    今天给 atom 安装一个插件autocomplete-python的时候出现错误 npm ERR! Windows_NT 6.1.7600 npm ERR! argv "C:\\Progr ...

  2. C#新开一个线程取到数据，如何更新到主线程UI上面

       一:问题 之前有被面试官问过,在WinForm中,要去网络上获取数据,由于网络环境等原因,不能很快的完成,因此会发生进程阻塞,造成主进程假死的现象,需要怎么解决?    二:思路 因此,往往是新 ...

  3. Win7 安装Apache 2.2.4报错：<OS 5>拒绝访问. :Failed to open the WinNT service manager

    Apache 2.2安装档与win7的“用户账户控制”冲突,所以只要先关闭,安装完后再开启即可. 重启,然后再重新安装Apache2.2.4,没有出现错误.然后再把上述设置改回去. 参考:http:/ ...

  4. WebApi中直接返回json字符串的方法

    [HttpPost] public HttpResponseMessage Upload() { string json = "{\"result\":\"tr ...

  5. OllyICE 调试的程序无法处理异常 解决方法

    问题描述 在用OllyICE打开可执行文件时出现如下图所示错误 解决方法 1. 选项 -> 调试设置 , 打开调试选项 2. 切换到 异常 页签 3. 取消勾选 忽略(传递给程序)以下异常: 单 ...

  6. Struts2的属性驱动与模型驱动的区别

    1.Struts2的属性驱动. Struts2的属性驱动指的是在action中JSP页面的每一个form中的name都对应在action中有一个属性与之对应.看下面代码片段: <form act ...

  7. [原创]HierarchyView的实现原理和Android设备无法使用HierarchyView的解决方法

    最近在看一个老外写的东西,发现里面有个类,使用这个类可以让任何设备使用HierarchyView. 众所周知,市面上卖的Android设备,一般都不能使用HierarchyView,所以借此机会,了解 ...

  8. [转]silverlight Datagrid 行上增加ToolTip

    有两种办法: 1. 直接在后台处理在数据绑定后 ,注册LoadingRow 事件this.DataGrid.LoadingRow += new EventHandler<DataGridRowE ...

  9. WindowsStore页面导航

    第一个页面:前台 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> &l ...

  10. Web功能之组织结构图

    前提:由于项目需要显示组织结构图的形式 工具:VS2010 项目:ASP.NET 自带的web项目 (带模板页) 插件:OrgChart(依赖:OrgChart.dll).JOrgChart 不多说 ...