jquery animate()方法 动画详解（超简单易懂）

2022-11-28 15:36:14 浏览数 (1)

jquery animate 动画详解（超简单易懂）

animate（）方法是jquery里的动画效果，通过修改css相关属性，在规定时间内，值是不断变化的从而形成了一种动画的效果。

(selector).animate({styles},speed,easing,callback)

styles  必需。规定产生动画效果的一个或多个 CSS 属性/值。逗号分隔

speed   可选。规定动画的速度。可能的值 毫秒 "slow"  "fast"

easing 可选。规定在动画的不同点中元素的速度。默认值是 "swing"。可能的值：

  • "swing" - 在开头/结尾移动慢，在中间移动快
  • "linear" - 匀速移动

提示：扩展插件中提供更多可用的 easing 函数。

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

代码语言：javascript复制
$(document).ready(function(){
	$("#btn1").click(function(){
		$("#box").animate({height:"300px"});
	});
});

单击按钮盒子变高到300px（达到300px不是在原基础上加300px），speed没写，默认是normal，easing默认swing，可以安装插件在插件中选择更多的移速效果，callback执行函数。

注：css属性名必须要采用驼峰命名法，其次个别属性进行操作的时候，要符合要求，比如left top设置时要给相关元素进行定位，在进行颜色设置时，要加入颜色插件才能修改颜色。

多属性

代码语言：javascript复制
$(document).ready(function(){
	$("#btn1").click(function(){
		$("#box").animate({height:"300px",width:"300px"});//多属性写在一起  同时触发
	});

动画队列 

代码语言：javascript复制
$(document).ready(function(){
	$("#btn1").click(function(){
		$("#box").animate({height:"300px",width:"300px"}); //动画队列 会按顺寻执行
		$("#box").animate({height:"100px",width:"100px"});
	});
});

 属性相对值

代码语言：javascript复制
$(document).ready(function(){
	$("#btn1").click(function(){
		$("#box").animate({height:" =100px",width:" =300px"});//相对值书写 在原有基础上增加100px
	});
});

 回调函数

代码语言：javascript复制
$(document).ready(function(){
	$("#btn1").click(function(){
		$("#box").animate({height:" =100px",width:" =300px"},2000,function(){   //回调函数
		$("#box").animate({height:" =100px",width:" =300px"},2000)});    
	});
});

stop（）停止动画队列 。

java jquery css

0 人点赞