jQuery动画animate()的使用

自己定义动画效果:

使用方法: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>

效果图:

时间: 2024-10-12 19:57:04

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

jQuery动画animate方法使用介绍

jQuery动画animate方法使用介绍 用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式.paramsOptions一组包 含作为动画属性和终值的样式属性和及其值的集合 params 对象{},注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left,如果使用

解决点击多次jquery动画animate反应迟钝的问题

最近做了一个网页,用到了animate的动画效果,点击连接就滚动屏幕到相应的位置,可是前几次点击没有问题,随着点击次数的增多,动画响应越来越慢,到后来点击一次要等好几秒才开始滚动,最后我找到了原因,动画没有播放结束,队列越来越长导致的. 解决办法: $('body').stop().animate({scrollTop:aaa},300);在animate前加一个stop即可停止当前动画清空队列马上执行新的动画. 附上stop();的使用方法: stop([clearQueue], [gotoE

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

JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="styl

JavaScript强化教程——jQuery动画

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuery动画 jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法:$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性. 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒

jquery动画,获取,添加

动画: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>stop实验测试</title> <script src="../js/jquery-1.4.2.js"></script> <script src="../js/jquery-1.8.3.min.js"><

jquery之动画animate底层原理猜测

jQuery中animate()方法使用时,如果想像一般的程序那样在程序进行到最后的时候执行一句条件语句变量的更变: html代码: <div id="dv"> <div id="d2"></div> </div> <button id="move">移动</button> css:div{ display:none; position:relative; left:0px;

jQuery中动画animate(下)

jQuery中动画animate(下) animate在执行动画中,如果需要观察动画的一些执行情况,或者在动画进行中的某一时刻进行一些其他处理,我们可以通过animate提供的第二种设置语法,传递一个对象参数,可以拿到动画执行状态一些通知 .animate( properties, options ) options参数 duration - 设置动画执行的时间 easing - 规定要使用的 easing 函数,过渡使用哪种缓动函数 step:规定每个动画的每一步完成之后要执行的函数 prog

jQuery中动画animate(上)

jQuery中动画animate(上) 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就需要强大的animate方法了 操作一个元素执行3秒的淡入动画,对比一下2组动画设置的区别 $(elem).fadeOut(3000) $(elem).animate({ opacity:0 },3000) 显而易见,animate方法更加灵活了,可以精确的控制样式属性从而执行动画 语法: .animate( properties ,[ duration ], [ easing ], [ com

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

jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:“-300px”}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部 -300px的位置,第二次点击时的并不是page在