自己定义动画效果：



使用方法：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. Spring版本功能变更&Spring4.x的新特性

    有朋友想知道Spring不同版本都有哪些功能变更,说直接在百度搜索找到的结果都不是想要的,其实还是关键词不对,找Spring不同版本的新特性就能获得更好的结果.其实在Spring工程github的wi ...

  2. Python基本数据类型之字典dict

    字典dict 是一个键(key)值(value)对,结构为{},大括号 创建字典 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 info = { # k ...

  3. Prism学习(1)---前期准备

    本文摘取自Gene's Blog的博客园文章,版权归Gene's Blog,仅供个人学习参考.转载请标明原作者Gene's Blog. 在学习Prism框架之前,我预先写了一个非常简单的计算器解决方案 ...

  4. js隐藏与显示回到顶部按钮

    window.onscroll = function () { if (document.documentElement.scrollTop + document.body.scrollTop > ...

  5. LeetCode 75. Sort Colors （python一次遍历，模拟三路快排）

    LeetCode 75. Sort Colors (python一次遍历,模拟三路快排) 题目分析: 本题需要实现数字只包含0,1,2的排序,并且要求一次遍历. 由于只用把数字隔离开,很容易想到快排的 ...

  6. SQL Server将数据导出到SQL脚本文件

    http://www.studyofnet.com/news/list-8883.2-1-4.html 一.SQL Server 2008将数据导出到SQL脚本文件 1.打开SQL Server200 ...

  7. VTK+MFC 系列教程 非常强大

    虽然QT才是王道!MFC的懂一些也是好的. 原文链接:http://blog.csdn.net/www_doling_net/article/details/8939115 之前介绍了基于VTK的单文 ...

  8. java中4种修饰符访问权限的区别及详解全过程

    java中4种修饰符访问权限的区别及详解全过程 http://jingyan.baidu.com/article/fedf0737700b3335ac8977ca.html java中4中修饰符分别为 ...

  9. 【从零开始】【Java】【1】Git和svn

    闲聊 干活快一年了吧,感觉工作中能干的事情也有一点了,但总有种不通透的感觉,查一个问题,能一路查出一堆不明白的东西. 之前新建过文档是记录点点滴滴的知识的,使用上没问题了,但原理什么的还是不懂,想了想 ...

  10. CorelDRAW X6、X7&2018，500现金返利等你拿！

    购物狂欢节要来了,你准备好了么? 不知何时起,四根神棍的日子却成了大家拼爹.拼钱包.拼手速.拼网速.拼钱包...各种火拼日子 你是从哪年关注并重视双11的,记得小编我第一次邂逅双11真的只是凑凑热闹 ...