（五）jQuery animate（）方法实现动画效果

北斗星的爱886

于 2021-07-01 09:21:55 发布

阅读量835

点赞数

分类专栏： jQuery 文章标签： jquery css3 html5 vue.js

本文链接：https://blog.csdn.net/zhangjie2016/article/details/118378878

版权

jQuery 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用jQuery中的animate()方法来创建自定义动画效果。通过实例展示了基本的动画设置，包括移动元素的位置、调整透明度及尺寸等。同时，还演示了如何通过连续调用animate()方法实现复杂的动画序列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

animate() 方法用于创建自定义动画

实例：
点击按钮，实现div向右移动200px。

$('button').click(function(){
	$('.div').animate({left: '200px'});
})

提示：默认的，所有 HTML 元素都有一个静态位置，且无法移动。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

.div{position: absolute;}

animate() 操作多个属性

$('button').click(function(){
	$('.div').animate({
		left:'200px',
		opacity:'0.8',
		width: '100px',
		height:'100px'
	});
})

animate() 实现多个动画

$('button').click(function(){
	var div = $('.div');
	div.animate({height:'300px',opacity:'0.5'},800);
	div.animate({width:'300px',opacity:'0.8'},600);
	div.animate({height:'100px',opacity:'0.6'},500);
	div.animate({width:'100px',opacity:'0.8'},1000);
})