jquery之效果函数

最新推荐文章于 2022-07-25 13:46:07 发布

kevin_love_it

最新推荐文章于 2022-07-25 13:46:07 发布

阅读量190

点赞数

分类专栏： javaScript/jquery 文章标签： jquery javascript html css jsp

本文链接：https://blog.csdn.net/kevin_love_it/article/details/78619609

版权

javaScript/jquery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

jquery的效果函数介绍，包括渐入渐出，滑上滑下，延时，显示，隐藏

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<script src="../../Document/lib/jquery-3.2.1.min.js"></script>
	<title>jquery effect</title>
</head>
<body>
	<h2>jquery effect</h2>
	<div style="width:100%;background-color:#dcdcdc">
		<p style="display: none;height:100px;" id="id01">hello everybody</p>
		<!-- <button class="btn2">slideDown</button> -->
		<!-- <button class="btn3">slideUp</button> -->
		<!-- <span style="color:blue" id="foo">hello span</span> -->

		<button id="left">«</button> 
		<button id="right">»</button>
		<div class="block" style="height:100px;width:200px;color:#ffffff;background-color:#228B22">hello block</div>

		<button id="go">Go</button> <button id="stop">STOP!</button>
		<div class="block"></div><button id="go">Go</button> <button id="stop">STOP!</button>
		<div class="block"></div>
	<script type="text/javascript">
	// 基本
	// show([s,[e],[fn]])
	// hide([s,[e],[fn]])

	// $("#id01").show("slow",function(){
	// 	$(this).text("animate done!");
	// });

	// $("#id01").show(1000,function(){
	// 	$(this).text("你好，系统维护中。。。");
	// });
	// $("#id01").hide(1500);

	// toggle([s],[e],[fn]) 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
	// var showOrHide = false;
	// $('#foo').toggle(showOrHide);
	//相当于
	// if (showOrHide) {
	// 	$('#foo').show();
	// } else {
	// 	$('#foo').hide();
	// }

	// 滑动
	// slideDown([s],[e],[fn])
	// slideUp([s,[e],[fn]])
	// slideToggle([s],[e],[fn])

	// $(".btn2").click(function(){
	// 	$("p").slideDown();
	// });
	// $(".btn3").click(function(){
	// 	$("p").slideUp();
	// });

	// $("#id01").slideToggle("fast");

	// $("p").slideToggle("fast",function(){
	// 		alert("Animation Done.");
	// });

	// 淡入淡出
	// fadeIn([s],[e],[fn])
	// fadeOut([s],[e],[fn])
	// fadeTo([[s],o,[e],[fn]])
	// fadeToggle([s,[e],[fn]])

	// $("p").fadeIn("slow");
	// $("p").fadeOut("slow");
	// $("p").fadeTo("slow",0.45);// 以缓慢的速度选定的元素透明度调整为0.45
	// $("p").fadeToggle("slow");

	// 自定义
	// animate(p,[s],[e],[fn])1.8*
	// stop([c],[j])1.7*
	// delay(d,[q])
	// finish([queue])1.9+

	// $("#right").click(function(){
	// 	$(".block").animate({left: '+50px'}, "slow");
	// });

	// $("#left").click(function(){
	// 	$(".block").animate({left: '-50px'}, "slow");
	// });

	// 在600毫秒内切换段落的高度和透明度
	// $("p").animate({
	// 	height: 'toggle', opacity: 'toggle'
	// }, "slow");

	// 开始动画
	// $("#go").click(function(){
	// 	$(".block").animate({left: '+200px'}, 5000);
	// });

	// 当点击按钮后停止动画
	// $("#stop").click(function(){
	// 	$(".block").stop();
	// });

	// 在.slideUp() 和 .fadeIn()之间延时800毫秒。
	$('p').slideUp(300).delay(800).fadeIn(400);

	// 停止当前正在运行的动画 
	// $("#complete").click(function(){
	// 	$("div").finish();
	// });

	// 设置
	// jQuery.fx.off

	jQuery.fx.off = true;
	$("input").click(function(){
		$("div").toggle("slow");
	});
	// jQuery.fx.interval
	</script>
	</div>
</body>
</html>