jQuery 动效 animate()

编程教程 > WEB > JavaScript (30) 2025-01-13 15:31:37
jquery动画566
案例参考
<html>
	<head>
	<script type="text/javascript" src="/jquery/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		
 			$(".btn1").click(function(){
   				$("#box").animate({height:"300px"});
 			});
 			
 			$(".btn2").click(function(){
   				$("#box").animate({height:"100px"});
 			});
		});
	</script>
	</head>
	<body>
		<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
		</div>
		<button class="btn1">Animate</button>
		<button class="btn2">Reset</button>
	</body>
</html>

定义和用法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。

只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。

注释:使用 "+=" 或 "-=" 来创建相对动画(relative animations)。

语法 1

$(selector).animate(styles,speed,easing,callback)
参数 描述
styles

必需。规定产生动画效果的 CSS 样式和值。

可能的 CSS 样式值(提供实例):

注释:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。

speed

可选。规定动画的速度。默认是 "normal"。

 

可能的值:

  • 毫秒 (比如 1500)
  • "slow"
  • "normal"
  • "fast"
easing

可选。规定在不同的动画点中设置动画速度的 easing 函数。

内置的 easing 函数:

  • swing
  • linear

扩展插件中提供更多 easing 函数。

callback

可选。animate 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

语法 2

$(selector).animate(styles,options)
参数 描述
styles 必需。规定产生动画效果的 CSS 样式和值(同上)。
options

可选。规定动画的额外选项。

 

可能的值:

  • speed - 设置动画的速度
  • easing - 规定要使用的 easing 函数
  • callback - 规定动画完成之后要执行的函数
  • step - 规定动画的每一步完成之后要执行的函数
  • queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始
  • specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数

 

更多参考:jQuery 效果 - animate() 方法


评论
User Image
提示:请评论与当前内容相关的回复,广告、推广或无关内容将被删除。

相关文章
定义和用法animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创
尽管现在前端技术发展飞速发展,各种技术迭代很快,但jQuery还是在一些企业站或者简单网页尝尝用到,本文记录一下学写jQuery插件的内容,愿新手共勉,共同进步
jquery模拟点击事件写法//语法:$(selector).trigger("click");$('#test).trigger("click"); over
jquery/j获取raido选中元素/选中值html&lt;div id="testRaidoGroup"&gtl;&lt;input type="radio" name="te
jquery中的foreach(即each)数据的遍历或者处理HTML页面元素的遍历使用方法讲解
使用jQuery判断元素是否在可视区域 $("#app").offset().top; offset().top表示 绝对偏移值,比如说有一个很长的页面,#ap
JavaScript/jquery选择同级兄弟节点选择上下级节点方法&lt;script&gtl;function js_selector() {var s= documen
jquery动态绑定事件处理一些由于html代码是动态生成,导致普通的$('selector') 绑定事件失败问题&lt;!DOCTYPE html&gtl;&lt;html&gtl;&lt;h
jquery插件Viewer.js是一个强大的图片查看工具,Viewer也提供了一个纯js版本的工具,图片查看,Viewer.js,Viewer
js/jQuery获取textarea的光标位置实现光标位置插入内容
layer.prompt弹出框设置默认值,layer.prompt弹出框如何默认值,偶尔需要给layer的弹出设置默认值这里详细讲解一下
问题:artdialog怎么使用?一、获取artdialog组件获取途径:官网下载:http://aui.github.io/artDialog/GitHub获
artdialog 弹出页面iframe,artDialog,artDialog弹出页面
网页项目集成扫码枪设备实现一/二维码扫码识别,可以吧扫码枪当成是和键盘一样的输入设备理解,然后进行下面的学习路径
nodejs中http模块使用简单demo