Jquery——方法使用③

最新推荐文章于 2025-07-07 14:28:55 发布

原创最新推荐文章于 2025-07-07 14:28:55 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery

JQ 专栏收录该内容

15 篇文章

订阅专栏

这篇博客主要介绍了Jquery中如何停止动画，包括显示隐藏、上下拉和淡入淡出效果的实现。此外，还讲解了属性操作以及class的添加删除，帮助读者掌握Jquery对DOM元素的样式和行为控制。

停止动画

<style>
div {
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>

<input type="button" value="开始">
<input type="button" value="结束">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () {
$("div").slideDown(4000).slideUp(4000);
});
$("input").eq(1).click(function () {
//stop:停止当前正在执行的动画
//clearQueue:是否清除动画队列 true false
//jumpToEnd:是否跳转到当前动画的最终效果 true false
//.stop().animate();
$("div").stop(true, true);
})
});
</script>

显示隐藏，上下拉，淡入淡出

<style>
div {
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>

显示隐藏

<script src="jquery-1.12.4.js"></script>
<script>
	$(function () {
		$("input").eq(0).click(function () {
			//show不传参数，没有动画效果
			//$("div").show(); 最好不用添加数值，直接显示
			//show(speed)
			//speed:动画的持续时间 可以是毫秒值 还可以是固定字符串
			//fast:200ms normal:400ms slow:600
			//$("div").show("ddd");
			// show([speed], [callback])
		$("div").show(1000, function () {
			console.log("哈哈，动画执行完成啦");
		})
});
	$("input").eq(1).click(function () {
		$("div").hide();
		})
});
</script>

在这里插入图片描述

上下拉

<script src="jquery-1.12.4.js"></script>
	<script>
		$(function () {
			//滑入（slideDown） 滑出：slideU
			$("input").eq(0).click(function () {
			//slideDown：如果不传参数，有一个默认值normal
			//$("div").slideDown();
			//$("div").slideDown(1000);
			$("div").slideDown(1000, function () {
			console.log("额呵呵");
			});
	});
		$("input").eq(1).click(function () {
			$('div').slideUp();
		})
		$("input").eq(2).click(function () {
			//如果是滑入状态，就执行滑出的动画，
			$('div').slideToggle();
		})
});
</script>

在这里插入图片描述
3. 淡入淡出

<script src="jquery-1.12.4.js"></script>
	<script>
		$(function () {
			//淡入：fadeIn 淡出：fadeOut 切换：fadeToggle
			$("input").eq(0).click(function () {

		$("div").fadeIn(2000);

	});
		$("input").eq(1).click(function () {
		$("div").fadeOut(1000);
})
$("input").eq(2).click(function () {
	//如果是滑入状态，就执行滑出的动画，
	$('div').fadeToggle();
	})
});
</script>

在这里插入图片描述

属性操作

<!--样式：在style里面写的，用css来操作。-->
<!--属性：在里面里面写的，用attr方法操作。-->

编写方法

$(function () {
//用法和css一样
//设置单个属性
//attr(name, value)
//$("img").attr("alt", "图破了");
//$("img").attr("title", "错错错错");
//设置多个属性
/*$("img").attr({
alt:"图破了",
title:"错错错",
aa:"bb"
})*/
console.log($("img").attr("alt"));
});

class添加删除

设定样式以及控件

<style>
li.basic {
background-color: pink;
font-size: 32px;
color: red;
}
.bigger {
font-size: 40px;
}
</style>

<input type="button" value="添加basic类" >
<input type="button" value="添加bigger类">
<input type="button" value="移除bigger类">
<input type="button" value="判断bigger类">
<input type="button" value="切换类">
<ul>
	<li class="aa bb cc dd">1</li>
	<li class="aa bb cc dd">2</li>
	<li class="aa bb cc dd">3</li>
	<li class="aa bb cc dd">4</li>
</ul>

功能设定

<script src="jquery-1.12.4.js"></script>
	<script>
		$(function () {
			$("input").eq(0).click(function () {
			// 添加一个类
			$("li").addClass("basic");
		});
	$("input").eq(1).click(function () {
	$("li").addClass("bigger");
	});
	$("input").eq(2).click(function () {
	//移除一个类
	$("li").removeClass("bigger");
});
//判断类
$("input").eq(3).click(function () {
//移除一个类
console.log($("li").hasClass("bigger"));;
});
$("input").eq(4).click(function () {
	//判断li有没有basic类，如果有，就移除他，如果没有，添加他
	//toggle 切换
	$("li").toggleClass("basic");
	});
});
</script>

在这里插入图片描述