首页 jquery正文

jQuery动画效果怎么做

启明SEO jquery 2022-03-22 22:47:09 973 0 jQuery动画效果

jQuery 动画 - animate() 方法

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

jQuery动画效果怎么做

语法:

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用;它把 <div> 元素移动到左边,直到 left 属性等于 250 像素为止:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<script src="jquery-3.6.0.min.js"></script>
	<script>
	$(function(){
		$('#btn1').click(function(){
			
			
			$('.tutu').animate({left:'250px',width:'100px',height:'100px',opacity:'0.5'});
			
		});
		$('#btn2').click(function(){
			
			
			$('.tutu').animate({left:'-10px',width:'200px',height:'200px',opacity:'1'});
			
		});
		
		
	});
	
	</script>
	<style type="text/css">
		
		.tutu{
			width:300px;
			height: 300px;
			background-color: red;
			position:relative;
/*			margin: 0 auto;*/
		}
	</style>
	</head>
<body>
	
	<div class="tutu">
	
	</div>
	<input type="button" id="btn1" value="动画一">
	<input type="button" id="btn2" value="动画二">
</body>
</html>

如上代码,如果点击动画一按钮,div就会往右移动250px,并且大小会变成高100px,宽100px,透明度会变成0.5;如果点击动画二按钮,div就会往回移动10px,高度和宽度会变成200px,透明度会变成1;

评论

启明SEO微信

有什么问题欢迎添加微信咨询

好文推荐

实时访客入口页面出现bd_vid=标识是什么原因

实时访客入口页面出现bd_vid=标识是什么原因

最近查看百度实时访客,总是会看到入口页面会多......

有了微信视频号,但是没有发布权限,怎么开通

有了微信视频号,但是没有发布权限,怎么开通

视频号是微信在2020年1月19号开始内测的......

如何用python抓取爱企查企业信息

如何用python抓取爱企查企业信息

前段时间,经理让我去找一些企业的信息,我平常......

服务器配置低,宝塔面板安装IIS总是安装不上怎么办

服务器配置低,宝塔面板安装IIS总是安装不上怎么办

对于一般企业网站或者博客来说,对服务器的配置......

如何修改浏览器指纹,Canvas指纹、Webgl指纹、Audio指纹修改方法?

如何修改浏览器指纹,Canvas指纹、Webgl指纹、Audio指纹修改方法?

修改浏览指纹的方法其实也是很简单,主要使用到......

win10下安装MYSQL后,提示Can't connect to MySQL server on localhost (10061)相关问题解决方法

win10下安装MYSQL后,提示Can't connect to MySQL server on localhost (10061)相关问题解决方法

我遇到的问题是电脑原先安装过mysql,卸......