复合事件与显示效果

复合事件

hover(f1,f2):切换使用mouseover和mouseout()

toggle(f1,f2,f3,fn):版本问题(jquery1.9以前支持)

多个click()事件，toggle()还有其他含义（隐藏与显示)

$(function(){
				$("#h1").mouseover(function(){
					alert("悬浮");
				});
});

				$("#h1").hover(function(){alert("悬浮")},function(){alert("离开")});
				/*$("body").toggle(function(){
					$(this).css("background-color","red");
					
				},function(){
					$(this).css("background-color","yellow");
					
				},function(){
					$(this).css("background-color","green");
					
				});*/

显示效果

形式：hide([速度],[回调函数])；

其中速度：可以是数字（毫秒），也可以是单词（fast normal slow，注意加双引号）

hide():隐藏

show:显示

toggle:切换隐藏与显示

淡入淡出（透明度）

fadeIn():淡入显示

fadeout:淡出隐藏

控制高度

slideDown():下拉，显示

slideUp():上拉隐藏

总结显示问题：

显示：show() fadeIn() slideDown()

隐藏：hide() dadeout() slideUp()

			function myShow(){
//				$("h3").show(3000,myCallBack);
				//$("h3").slideDown(3000);//下拉
				//$("h3").fadeIn(3000);//淡入
			}
			
			function myCallBack(){
//				alert("显示完毕");
			};
			
			function myHide(){
//				$("h3").hide(3000);
				//$("h3").slideUp(3000);//上拉
				//$("h3").fadeOut(3000);//淡出
			}

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body >
		<h1 id="h1">我是h1</h1>
		<h3>h3h3</h3>
		<p id="color1">color1</p>
		<p id=""></p>
		
		<button onclick="myShow()">显示</button>
		<button onclick="myHide()">隐藏</button>
		<script type="text/javascript" src="jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#h1").mouseover(function(){
					alert("悬浮");
				});
			});
			$(document).ready(function(){
				$("#h1").hover(function(){alert("悬浮")},function(){alert("离开")});
				//hover:等效于mouseover与mouseout
				//toggle循环单击事件click
				/*$("body").toggle(function(){
					$(this).css("background-color","red");
					
				},function(){
					$(this).css("background-color","yellow");
					
				},function(){
					$(this).css("background-color","green");
					
				});*/
				//toggle:还具备隐藏于显示
					/*hide:隐藏
					  show:显示
					  toggle:隐藏于显示*/
					 
					 $("#color1").css({"color":"red","font-size":"100px","background-color":"gray"})
				
			});
			
//			显示与隐藏：
			function myShow(){
//				$("h3").show(3000,myCallBack);
				//$("h3").slideDown(3000);//下拉
				//$("h3").fadeIn(3000);//淡入
			}
			
			function myCallBack(){
//				alert("显示完毕");
			};
			
			function myHide(){
//				$("h3").hide(3000);
				//$("h3").slideUp(3000);//上拉
				//$("h3").fadeOut(3000);//淡出
			}
			//控制高度
			/*slideDown:下拉 显示
			slideUp:上拉 隐藏*/
			
			//操作DOM
/*					a.样式操作(设置css)
						jquery对象.css("属性名","属性值");
						jquery对象.css({"属性名":"属性值","属性名":"属性值",...,"属性名":"属性值"});
*/	
					/*ii.追加或移除样式class
						addClass("x");
						addClass("x x x");
						removeClass("x);
						removeClass("x x x"");
						removeClass();移除全部样式*/

		
		
		</script>
	</body>
</html>