自己定义动画效果：



使用方法：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. js 获取现在时间一个月（N天）后的日期

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 let today = new Date().getTime() let lastDay = getTimeByDay( ...

  2. JDBC基础02

    今日知识 1. sql注入问题2. jdbc批处理3. 事务 SQL注入问题解决 1.什么是sql注入. * 用户通过相关的特殊关键字sql语句非法访问数据库 *例如: Xxx(' or '1'='1 ...

  3. Hadoop MapReduce编程 API入门系列之网页排序（二十八）

    不多说,直接上代码. Map output bytes=247 Map output materialized bytes=275 Input split bytes=139 Combine inpu ...

  4. CI中的验证码

    CI中的验证码相对来说使用非常方便直接加载类调用函数以及一些配置,代码如上,比较简单,具体函数可在CI手册的辅助函数参考CAPTCHA辅助函数中查询,CI中的验证码是直接生成验证码图片在你自己创建的C ...

  5. js 找数组中的最值

    背景: 2个数组以下 , 比如  [[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]] 找最值的时候, ...

  6. Android 消息队列机制

    在非UI线程使用Handler进行线程通信时,一般都需要进行3个步骤: 创建Looper Looper.prepar() 创建Handler 启动消息循环Looper.loop() 通过这3步,基本就 ...

  7. MongoDB 博客截图之二

    使用内置帮助help() 基本命令示例 来源:MongoDB基本管理命令 - 千与的专栏 - 博客频道 - CSDN.NET

  8. AI:**消灭程序员需要一百年吗？

    这篇博文真的很长,不过挺有意思.关于智能机器人的发展前景还是很广的,因为每一步都异常艰难,而什么时候可以终止还无法预料,所以程序员没办法失业啊! 转自于图灵社区:http://www.ituring. ...

  9. MD5加盐，实现一人一密

    理论上md5是不可逆的,而且MD5本来也不是作加密使用,而是用来校验数据的完整性,只是因为其不可逆且稳定.快速的特点,被广泛用于对明文密码的加密. 至今仍然后很多开发人员相信MD5的保密性,也许因为他 ...

  10. Python Django中QQ邮箱授权码问题

    Python Django中QQ邮箱授权码问题 系统及软件版本如下: Ubuntu Kylin 16.04 Python 3.5.1 Django 1.9.7 PyCharm Community Ed ...