jQuery之动画效果淡入淡出

最新推荐文章于 2024-03-10 18:19:17 发布

不难呐

最新推荐文章于 2024-03-10 18:19:17 发布

阅读量393

点赞数

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/qq_41238274/article/details/106184044

版权

Jquery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用jQuery的淡入淡出方法实现元素的视觉效果。包括fadeIn用于淡入，fadeOut用于淡出，fadeTo调整不透明度，fadeToggle切换淡入淡出。并提供了一个HTML示例，演示了四种方法的应用。

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

通过淡入淡出的方法来实现效果

fadeIn
通过不透明度的变化来实现所有匹配元素的淡入效果，动画完成后可选地触发一个回调函数
fadeOut()
通过不透明度的变化来实现所有匹配元素的淡出效果，动画完成后可选地触发一个回调函数
fadeTo()
将所有匹配元素的不透明度以渐进方式调整到指定的不透明度，动画完成后可选地触发一个回调函数
fadeToggle()
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，动画完成后可选地触发一个回调函数
jQuery的淡入淡出案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.demo{
				width: 300px;
				height: 300px;
				background-color: greenyellow;
				display: none;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<input type="button" class="fadeIn" value="淡入" />
		<input type="button" class="fadeOut" value="淡出" />
		<input type="button" class="fadeTo" value="渐进式淡入" />
		<input type="button" class="fadeToggle" value="切换" />
		<div class="demo"></div>
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//fadeIn
				$('.fadeIn').click(function() {
					$('.demo').fadeIn(1000, 'swing')
				})
				//fadeOut
				$('.fadeOut').click(function() {
					$('.demo').fadeOut(1000, 'swing')
				})
				//fadeTo
				$('.fadeTo').click(function() {
					$('.demo').fadeTo(1000, 0.3,'swing')
				})
				//fadeToggle
				$('.fadeToggle').click(function() {
					$('.demo').fadeToggle(1000,'swing')
				})
			})
		</script>
	</body>
</html>