JAVA_EE/JQuery

[21.10.15] exam01(05_jQueryAnimation)

luvforjunk 2021. 10. 15. 10:28
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<button id="btn1">slideUp</button>
	<button id="btn2">slideDown</button>
	&nbsp;&nbsp;&nbsp;

	<button id="btn3">fadeIn</button>
	<button id="btn4">fadeOut</button>
	&nbsp;&nbsp;&nbsp;

	<button id="btn5">slide toggle</button>
	<button id="btn6">toggle</button>

	<p>이미지</p>
	<img src="../img/img5.PNG" width="500px" height="300px">
	
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#btn1').click(function(){
		$('img').slideUp(1000);
	});
	
	$('#btn2').click(function(){
		$('img').slideDown(1000);
	});
	
	$('#btn3').on('click', function(){ // bind 대신해서 요즘엔 On을 쓴다.
		$('img').fadeIn(1000); //이미지가 천천히 나타난다
	});
	
	$('#btn4').on('click', function(){
		$('img').fadeOut(1000); //이미지가 천천히 사라진다
	});
	
	$('#btn5').on('click', function(){
		$('img').slideToggle(3000); //slideUp, slideDown 번갈아
	});
	
	$('#btn6').on('click', function(){
		$('img').toggle(3000); //fadeIn, fadeOut 번갈아(왼쪽 상단)
	});
});
</script>
</body>
</html>

<!-- 
slideUp(), slideDown(), slideToggle()은 반드시 <img> 태그에 width, height 속성을 주어야 한다
그렇지 않으면 toggle()와 똑같은 동작을 한다

slideUp(speed) : speed값을 지정해서 슬라이드업 효과를 줄 수 있다
speed : "slow" or "fast" or milliseconds(1/1000초)
 -->
728x90
반응형