如何用jQuery设置动画

最新推荐文章于 2024-04-16 15:12:02 发布

玖.儿

最新推荐文章于 2024-04-16 15:12:02 发布

阅读量1.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/weixin_44484756/article/details/86522377

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用jQuery设置各种动画效果，包括隐藏、显示、滑动、淡入淡出及自定义动画，通过实例演示了不同动画函数的应用。

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

如何用jQuery设置动画

JS和jQuery都可以设置动画，但是用jQuery来设置动画比JS的简单，因为jQuery大多数都是用插件来完成，让我们节省了很多代码，接下来用一个表格来简单分析一些jQuery常见的效果

分类	函数	描述
基本	hide（）	隐藏所显示的元素
	show()	显示所隐藏的元素
	toggle()	用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件
滑动	slideUp()	通过高度的变化（向上缩小）来动态地隐藏所有匹配的元素，完成后可选地触发一个回调函数
	slideDown()	通过高度的变化（向下扩展）来动态地显示所有匹配的元素，完成后可选地触发一个回调函数
	slideToggle()	通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
淡入淡出	fadeOut()	通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数
	fadeIn()	通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数
	fadeTo()	把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数
	fadeToggle()	通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数
自定义	stop()	停止所有在指定元素上正在运行的动画
	delay()	设置一个延时来推迟执行队列中之后的项目
	animate()	用于创建自定义动画的函数

animate支持的样式：(目前不支持颜色动画)

backgroundPositionX	backgroundPositionY	borderWidth
borderBottomWidth	borderLeftWidth	borderRightWidth
borderTopWidth	borderSpacing	margin
marginBottom	marginLeft	marginRight
marginTop	outlineWidth	padding
paddingBottom	paddingLeft	paddingRight
paddingTop	height	width
maxHeight	maxWidth	minHeight
minWidth	fontSize	bottom
left	right	top
letterSpacing	wordSpacing	lineHeight
textIndent

注：此表格来自授课老师上课笔记的部分内容

看完表格后，你学会了吗？接下来实操一下吧！

第一步：设置自己想要的样式

设置一个盒子，在盒子里面加点文字来观看动画效果，设置十三个按钮，每个按钮都绑定一个点击事件，每种效果设置在按钮里，点击按钮即可观看动画效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>如何用jQuery设置动画</title>
</head>
<style>
	#box{
		width:200px;
		height:200px;
		color:white;
		background: #E36062;
	}	
	#box1{
		position: fixed; /*固定定位*/
		top:30%;
	}	
	#btn1,#btn2,#btn3,#btn4,#btn5,#btn6,#btn7,#btn8,
	#btn9,#btn10,#btn11,#btn12,#btn13{
		width:110px;
		height:50px;
		background: #5B9BE7;
		border:none;    /*去掉边框*/
		color:white;   /*字体颜色*/
		margin: 10px; /*上下左右为10个像素*/
	}
</style>
<body>
	<div id="box">字体移动放大</div>
	<div id="box1">
		<button id="btn1">隐藏 hide</button>
		<button id="btn2">显示 show</button>
		<button id="btn3">切换 toggle</button>
		<br>
		<button id="btn4">滑动隐藏 slideUp</button>
		<button id="btn5">滑动显示 slideDown</button>
		<button id="btn6">滑动切换 slideToggle</button>
		<br>
		<button id="btn7">淡出 fadeOut</button>
		<button id="btn8">淡入 fadeIn</button>
		<button id="btn9">淡入淡出切换 fadeToggle</button>
		<br>
		<button id="btn10">调整透明度到 0.2 fadeTo</button>
		 <button id="btn11">自定义动画</button>
		<button id="btn12">停止</button>
		<button id="btn13">delay</button>
	</div>
</body>
</html>

效果图：
在这里插入图片描述
第二步：引入jQuery的插件，写jQuery的动画效果

点击这里下载jquery-1.12.4.min.js的插件

1.基本的动画
第一种写法：有一个渐变的动画效果

<script src="jquery-1.12.4/jquery-1.12.4.min.js"></script>
<script>
	$(function(){
           // 1000是开始到结束的时间，即1s
           // linear代表切换效果，意思是匀速，不写则默认为swing
		$("#btn1").click(function(){
			$("#box").hide(1000,'linear');
		});
		$("#btn2").click(function(){
			$("#box").show(1000,'linear');
		});
		$("#btn3").click(function(){
			$("#box").toggle(1000,'linear');
		});
	});
</script>

第二种写法：默认的效果

$("#btn1").click(function(){
	$("#box").hide();
});
$("#btn2").click(function(){
	$("#box").show();
});
$("#btn3").click(function(){
	$("#box").toggle();
});

2.滑动

$("#btn4").click(function () {
	 $("#box").slideUp();
});
$("#btn5").click(function () {
    $("#box").slideDown();
});
$("#btn6").click(function () {
    $("#box").slideToggle();
});

3.淡入淡出

$("#btn7").click(function () {
		//2000是开始到结束的执行时间，有个过渡效果
	$("#box").fadeOut(2000);
});
$("#btn8").click(function () {
    $("#box").fadeIn(2000);
});
$("#btn9").click(function () {
    $("#box").fadeToggle(2000);
});
$("#btn10").click(function () {
   //参数: 2000是执行的时间2s（可选），0.2是目标透明度
    $("#box").fadeTo(2000, 0.2);
});

4.自定义

$("#btn11").click(function () {
	$("#box").animate({
	     "fontSize": "35px",  /*执行过程中字体的变化*/
	 }, 1000);
});
$("#btn12").click(function () {
    $("#box").stop();
});
$("#btn13").click(function () {
      //delay设置延迟两秒执行匹配的元素
    $("#box").delay(2000).fadeOut(2000);
});

其实要实现动画效果并没有我们想象中的难，让我们有一种不学不知道，一学吓一跳的感觉，所以相信自己也能做出很好看的效果，加油！
今天就分享到这里，如果有什么不懂或者想要询问的，欢迎留言哦，谢谢支持！