自己定义动画效果：



使用方法：animate（js对象，运行时间。回调函数）；

js对象：{ }描写叙述动画运行之后元素的样式

运行时间：毫秒数

回调函数：动画运行结束后要运行的函数

html代码：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript" src="jquery-2.1.4/jquery.min.js" language="javascript"></script>

</head>

<body>

<div id="div1" style="width:200px; height:100px; background-color:#999999; position:absolute"  onclick="f1()"></div>

</body>

<script>

function f1(){

<span style="white-space:pre">			</span>//距离左 50%。距离上 300px 结果：斜下移动

	$("#div1").animate({"left":"50%","top":"300px"},3000,function(){

	  alert("动画完毕");

	});

}

</script>

</html>

效果图：

jQuery动画animate()的使用的更多相关文章

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

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

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

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

  3. jquery 动画总结（主要指效果函数）

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

  4. jquery动画效果---animate()--滚屏

    jquery动画效果---animate()方法---W3school

  5. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  6. 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

    1.jquery隐藏and显示事件 $("p").hide();      //隐藏事件$("p").hide(1000);  //1秒内缓慢隐藏$(" ...

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

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

  8. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

  9. jQuery中Animate进阶用法（一）

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

随机推荐

  1. Android的编译环境--Build系统【转】

    本文转载自:http://blog.csdn.net/kitty_landon/article/details/60764232 Android是一个庞大的系统,包含太多的模块,各种模块的类型也有10 ...

  2. Elo rating system（Elo 打分体系）

    A.B 两个待比较.评价的对象,分别打分为 RA,RB,则各自获胜的期望值为: ⎧⎩⎨⎪⎪⎪⎪⎪⎪EA=11+10(RB−RA)/400.EB=11+10(RA−RB)/400. 不妨令 QA=10R ...

  3. C Tricks（十七）—— 对角线元素的屏蔽、二维数组（矩阵）的遍历

    1. 对角线元素的屏蔽 使用 if + continue 实现对对角线元素的屏蔽 for u in range(n): for v in range(n): if u == v: continue . ...

  4. B1260 [CQOI2007]涂色paint 区间dp

    这个题和我一开始想的区别不是很大,但是要我独自做出来还是有一些难度. 每一次涂色 只有这两种可能: 1) 把一段未被 覆盖过的区间 涂成 * 色 2) 把一段被一种颜色覆盖的区间涂成 * 色 (并且 ...

  5. 关于sql2008的数据库导入问题的收集

    在下载一个源程序的时候,常常会一起下下来一个数据库,即一个.MDF文件和一个.LDF文件,那么我们如何添加到我们的SQL Server 2008中呢?下面是一些详细的步骤: 1.将.MDF和.LDF文 ...

  6. 淘宝CDN系统架构

         存储与架构分论坛上,淘宝网技术委员会主席,淘宝网核心工程师章文嵩向我们详细介绍了淘宝网图片处理与存储系统的架构.章文嵩博士的演 讲日程包括了 淘宝的整个系统架构.淘宝图片存储系统架构,淘宝网 ...

  7. webkitdirectory 实现文件夹上传

    文件夹上传这个功能在web端可能有需求,这里就简单介绍下用法. 目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传,具体可以看下百度云盘的网页版的上传按钮,在火狐下就支持按照文件 ...

  8. 第九课： - 导出到CSV / EXCEL / TXT

    第 9 课 将数据从microdost sql数据库导出到cvs,excel和txt文件. In [1]: # Import libraries import pandas as pd import ...

  9. 【Oracle】DBA_AUDIT_TRAIL表SES_ACTIONS字段对应的操作列表

    SES_ACTIONS字段共包含16个字符,初始状态都为“-”,当被审计的对象被操作后,SES_ACTIONS会在相应的位置作出标识,标识为“S”的代表操作成功,标识为“F”的代表操作失败,16个位置 ...

  10. java 抽象工厂模式简单实例

    抽象工厂模式:提供一个创建一系列的相关的或者依赖的对象的接口,无需指定它们的具体实现类,具体的时间分别在子类工厂中产生. 类似于工厂模式:隔离了具体类的生产实现,使得替换具体的工厂实现类很容易.包含有 ...