jq基础7——效果演示

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

原创最新推荐文章于 2024-04-16 15:12:02 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jquery 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍jQuery库中各种动画效果的实现方法，包括隐藏、显示、切换、滑动、淡入淡出及自定义动画，通过具体示例展示了如何使用jQuery进行网页元素的动态操作。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery</title>
</head>
<body>
	<script src="jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#b1").click(function(){
				$("#d").hide();
			});
			$("#b2").click(function(){
				$("#d").show();
			});
			$("#b3").click(function(){
				$("#d").toggle();
			});
			$("#b4").click(function(){
				$("#d").toggle(2000);
			});
			$("#b5").click(function(){
				$("#d").slideUp();
			});
			$("#b6").click(function(){
				$("#d").slideDown();
			});
			$("#b7").click(function(){
				$("#d").slideToggle();
			});
			$("#b8").click(function(){
				$("#d").slideToggle(2000);
			});
			$("#b9").click(function(){
				$("#d").fadeOut();
			});
			$("#b10").click(function(){
				$("#d").fadeIn();
			});
			$("#b11").click(function(){
				$("#d").fadeToggle();
			});
			$("#b12").click(function(){//0-1,浅到深
				$("#d1").fadeTo("slow",0.2);
				$("#d2").fadeTo("slow",0.5);
				$("#b3").fadeTo("slow",0.8);
			});

			$("#b13").click(function(){//向右移动100px，向左移动50px，高度变小
				$("#d").animate({left:'100px'},2000);
				$("#d").animate({left:'0px',top:'50px',height:'50px'},2000,function(){
					alert("动画结束，THANKS");
				});
			});
		});
	</script>
	<style type="text/css">
		div{
			border:1px solid lightgray;
			background-color: pink;
			width:400px;
			height:200px;
			position: relative;//自定义动画需要
		}
		.d{
			width:100px;
			height:100px;
		}
	</style>
	<button id="b1">立即隐藏</button>
	<button id="b2">立即显示</button>
	<button id="b3">立即切换</button>
	<button id="b4">延时切换(2s)</button><br><br>
	<button id="b5">向上滑动</button>
	<button id="b6">向下滑动</button>
	<button id="b7">滑动切换</button>
	<button id="b8">延时滑动切换(2s)</button><br><br>
	<button id="b9">淡出</button>
	<button id="b10">淡入</button>
	<button id="b11">淡入淡出切换</button>
	<button id="b12">指定淡入程度</button><br><br>
	<button id="b13">自定义动画</button>
	<div id="d" style="text-align: center">用于演示的div</div>
	<div id="d1" class="d"></div>
	<div id="d2" class="d"></div>
	<div id="d3" class="d"></div>
</body>
</html>