JQuery动画操作

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

辣椒沾辣酱啦

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

阅读量991

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery javascript css

本文链接：https://blog.youkuaiyun.com/weixin_70676044/article/details/127317094

本文详细介绍了JQuery中的样式操作，包括css方法和设置类样式方法，并探讨了JQuery的各种动画效果，如显示隐藏、划入划出、淡入淡出和自定义动画，以及如何停止动画排队。此外，还讲解了事件切换中的hover方法。

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

一，JQuery样式操作

JQuery中常用的样式操作有两种：css（）和设置类样式方法

1.1 方法1：操作css方法

JQuery可以使用css方法来修饰简单元素样式；也可以操作类，修改多个样式

常用以下三种形式：

注意：css（）多用于样式少时操作，多了则不太方便

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.a1{
				width: 69px;
				height: 69px;
				margin: 10px auto;
				background: url(img/c1.jpg);
				background-size: contain;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".a1").click(function(){
					$(this).css("background","url(img/c.png)").animate({
						width:224,
						height:69,
					},1000);
				});
			});
			
		</script>
	</head>
	<body>
		<div class="a1">
			
		</div>
	</body>
</html>

1.2 方法2：设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。

常用的三种设置类样式方法：

注意：

1.设置类样式方法比较适合样式多时操作，可以弥补css（）的不足。

2.原生js中className会覆盖元素原先里面的类名，JQuery里面类操作只是对指定类进行操作，不影响原先的类名。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#a1{
				width: 50px;
				height: 50px;
				margin: 10px auto;
				background-color: skyblue;
				color: aliceblue;
			}
			.a2{
				background-color: lightpink;
				font-family: "楷体";
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				$("#a1").click(function(){
					//赋予他一个类的样式
					$(this).addClass("a2")
				});
			});
		</script>
	</head>
	<body>
		<div id="a1">
			玉桂狗
		</div>
	</body>
</html>

二，JQuery效果

jQuery给我们封装了很多动画效果，最为常见的如下:

显示隐藏：show() / hide()/ toggle()
划入划出：slideDown()/ slideUp0)/ slideToggle()
淡入淡出：fadeln()/ fadeOut()/ fadeToggle() / fadeTo()
自定义动画：animate()

注意：

动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

jQuery为我们提供另一个方法，可以停止动画排队: stop();

2.1 显示隐藏

显示隐藏动画，常见方法有三个：

$("#a1").click(function(){
					//让div元素隐藏
					$("#a1").hide();
                    $("#a1").toggle();
                    //让div元素显示
					$("#a1").show();
				});

2.2 划入划出

划入划出，常见有三个方法：slideDown()/ slideUp0)/ slideToggle()

$(function(){
				$("#a1").click(function(){
					//划出
					$("#a1").slideUp();
					$("#a1").slideToggle();
					//划入
					$("#a1").slideDown();
				});
			});

2.3 淡入淡出

淡入淡出，常用方法有：fadeln()/ fadeOut()/ fadeToggle() / fadeTo()

$("#a1").click(function(){
					//淡入
					$("#a1").fadeIn();
					//淡出
					$("#a1").fadeOut();
				});

2.4 自定义动画

自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate()；

$(".a1").click(function(){
					//属性值的变化，时间，动画效果，动画完成之后的回调函数
					$(this).css("background","url(img/c.png)").animate({
						width:224,
						height:69,
					},1000);
				});