JQuery效果方法

slideDown() 方法用于向下滑动元素。

$(selector).slideDown(speed,callback);

slideUp() 方法用于向上滑动元素。

$(selector).slideUp(speed,callback);

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

stop() 方法用于在动画或效果完成前对它们进行停止。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

Callback 函数在当前动画 100% 完成之后执行。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

<html>
	<head>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// slideDown() 方法用于向下滑动元素。			
			// $(selector).slideDown(speed,callback);
			// slideUp() 方法用于向上滑动元素。
			// $(selector).slideUp(speed,callback);
			//slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。			
			//如果元素向下滑动，则 slideToggle() 可向上滑动它们。			
			//如果元素向上滑动，则 slideToggle() 可向下滑动它们。			
			//$(selector).slideToggle(speed,callback);	

			$(document).ready(function() {
				//下滑
				$("#down").click(function() {
					$(".panel").slideDown(5000);
				});
				//上滑
				$("#up").click(function() {
					$(".panel").slideUp("slow");
				});
				//切换上滑下滑
				$("#toggle").click(function() {
					$(".panel").toggle("slow");
				});

				//animate() 方法用于创建自定义动画。
				// $(selector).animate({params},speed,callback);
				// 必需的 params 参数定义形成动画的 CSS 属性。				
				$("#button").click(function() {
					$("#block").animate({
						left: '500px',
						opacity: '0.5',
						height: '250px',
						width: '250px',
					}, 5000);
				});

				//stop() 方法用于在动画或效果完成前对它们进行停止。			
				//stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

				$("#stop").click(function() {
					$(".panel").stop();
					$("#block").stop();
				});

				//Callback 函数在当前动画 100% 完成之后执行。
				//下滑之后回调
				$("#callback").click(function() {
					$(".panel").slideDown(3000, function() {
						alert("我打开了！")
					});
				});

				//Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
				//允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
				$("#chain").click(function() {
					$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
				});

			});
		</script>
		<style type="text/css">
			div.panel,
			p.flip {
				margin: 0px;
				padding: 5px;
				text-align: center;
				background: #e5eecc;
				border: solid 1px #c3c3c3;
			}

			div.panel {
				height: 280px;
				display: none;
			}
		</style>
	</head>
	<body>
		<button id="button">开始动画</button>
		<button id="stop">停止滑动</button>
		<button id="callback">下滑回调</button>
		<button id="chain">链</button>
		<p class="flip" id="up">上滑</p>
		<p class="flip" id="down">下滑</p>
		<p class="flip" id="toggle">切换</p>

		<div class="panel">
			<p>这是第一个段落</p>
			<p>这是第二个段落</p>
			<p>这是第三个段落</p>
			<p>这是第四个段落</p>
			<p>这是第五个段落</p>			
			<p>一起讨论、交流、学习前端技术。</p>
		</div>
		<p id="p1">这是第六个段落</p>
		<div id="block" style="background:#98bf21;height:100px;width:100px;position:absolute;">
		</div>
	</body>
</html>
posted @ 2020-12-09 15:51  小安不菜  阅读(73)  评论(0)    收藏  举报