自己定义动画效果：



使用方法：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. ubuntu系统源的更新

    以前没有注意,ubuntu的系统的源原来每次在GUI操作后都会追加在后面而不是覆盖,比如先添加了上海交大的源那么后来如果发现很慢下载不了,而这个包已经在apt-cache里面了,下次如果要instal ...

  2. js重定向

    在现行的网站应用中URL重定向的应用有很多: 404页面处理.网址改变(t.sina转到weibo.com).多个网站地址(如:http://www.google.com/ .www.g.cn )等: ...

  3. iOS开发中UIDatePicker控件的使用方法简介

    iOS上的选择时间日期的控件是这样的,左边是时间和日期混合,右边是单纯的日期模式. 您可以选择自己需要的模式,Time, Date,Date and Time  , Count Down Timer四 ...

  4. html基础知识整理

    html 标题 <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> html注释: ...

  5. VS2015启动显示无法访问此网站

    之前启动项目发生过几次,也忘了怎么解决了,今天记录一下:将应用文件夹下的vs目录删除,重新生成解决方案后,程序正常启动. 原文链接:https://blog.csdn.net/upi2u/articl ...

  6. jquery自动完成插件的使用

    .ui-autocomplete { z-index: !important; max-height: 100px; overflow-y: auto; /* 防止水平滚动条 */ overflow- ...

  7. Java基础9一面向对象

    继承 1.特点 a) 要有一定的层次结构,并且具备可传递性. b) 判断两者之间是否有继承关系通过is-a来判断. c) 子类继承了父类,那么子类就继承了父类中所有的属性和方法,但是父类中的私有属性和 ...

  8. C#关于VSHOST.EXE停止工作的解决办法，VS2008

    主要原因就是电脑系统系统32位和64位的问题在项目属性中修改下即可. 方法: 右击项目 - 属性 - 生成 - 目标平台 - Any CPU[改为x86] 虽然简单,但如不知原因却恼火的紧,贴出来如有 ...

  9. SQL 字段类型详解

    bit    整型 bit数据类型是整型,其值只能是0.1或空值.这种数据类型用于存储只有两种可能值的数据,如Yes 或No.True 或False .On 或Off.    注意:很省空间的一种数据 ...

  10. oracle 编译包的时候,一直提示正在编译

    select b.sid,b.serial#,b.machine,b.terminal,b.program,b.process,b.status from v$lock a , v$session b ...