adminschool.net wiki

문서의 이전 판입니다!

show() & hide()함수 사용 예

http://wldyd83.adminschool.net/jquery/hideshow.html
결과 : 클릭시 나타나고 클릭시 사라진다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	.whenAHover
	{
		color:Red;
		background-color:Orange;
	}
	</style>
	<script type="text/ecmascript" src=jquery-1.6.2.min.js></script>
	<script type="text/ecmascript">
		var isShow = true;
		$(document).ready(function(){
		$("a").hover(aHoverIn, aHoverOut);
		$("h1").click(h1Click);
		});
 
		function h1Click(){
			if(isShow == true){
				$("ul").hide("slow");
				isShow = false;
			}else{
				$("ul").show("slow");
				isShow = true;		
			}
		}
 
		function aHoverIn(){
			$(this).removeClass("whenAHover");
		}
		function aHoverOut(){
			$(this).removeClass("whenAHover");
		}
	</script>
</head>
<body>
	<h1><a href="#">Click It!</a></h1>
	<ul>
		<li><a href="#">MENU1</a></li>
		<li><a href="#">MENU2</a></li>
		<li><a href="#">MENU3</a></li>
		<li><a href="#">MENU4</a></li>
	</ul>
</body>
</html>

fadein()&out()함수 사용 예

http://wldyd83.adminschool.net/jquery/fadeinout.html

append()함수 사용 예

http://wldyd83.adminschool.net/jquery/append.html

목차

show() & hide()함수 사용 예

fadein()&out()함수 사용 예

append()함수 사용 예