自己定义动画效果：



使用方法：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. Thymeleaf：工具对象用法

    转自:https://blog.csdn.net/mygzs/article/details/52668248 #dates /* * ================================ ...

  2. c#为程序添加全局热键的方法

    在程序失去焦点或者在后台运行时,可以通过使用全局热键的方式,进行一些快捷的操作,如QQ默认操作中ctrl+alt+A调出截图功能. 在Windows中实现热键功能需要使用win32的Api函数Regi ...

  3. 原型模式(Prototype)C++实现

    意图:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 实用性:1.当要实例化的类是在运行时刻指定时. 2.为了避免创建一个与产品类层次平行的工厂类层次时. 3.当一个类的实例只能有几 ...

  4. BZOJ4517: [Sdoi2016]排列计数(组合数+错位排列)

    Time Limit: 60 Sec  Memory Limit: 128 MBSubmit: 1626  Solved: 994[Submit][Status][Discuss] Descripti ...

  5. javaweb 之 代理模式

    一.动态代理 1.1.代理模式 什么是代理模式及其作用 Proxy Pattern(即:代理模式),23种常用的面向对象软件的设计模式之一 代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问 ...

  6. C++序列化使用

    error C2248 无法访问私有成员 :原因 ifstream 作为参数必须传引用! (1):C++使用STL序列化:原文链接:http://blog.csdn.net/pandaxcl/arti ...

  7. HOG行人检测 如何制作样品

    原文链接:http://blog.csdn.net/Armily/article/details/8333836 如何制作训练样本 分析了原作者的数据集,结合网上一些资料,下面描述如何制作训练样本 1 ...

  8. （转）基于MVC4+EasyUI的Web开发框架经验总结（6）--在页面中应用下拉列表的处理

    http://www.cnblogs.com/wuhuacong/p/3840321.html 在很多Web界面中,我们都可以看到很多下拉列表的元素,有些是固定的,有些是动态的:有些是字典内容,有些是 ...

  9. PHP 数组 & 字符串处理

    1:数组分割为字符串  implode 2:字符串分割为数组  explode() 3:替换字符串 eg: $a = "Hello world" str_replace(“H”,“ ...

  10. 人工智能 Python 入门视频

    Python, 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年发明,第一个公开发行版发行于1991年.       Python是纯粹的自由软件, 源代码和解 ...