[jQuery] Effect

최은서·2023년 11월 10일

jQuery

목록 보기

4/5

1. show

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	$('#btn1').on('click',function(){
		//속도값 fast(200), normal(400), slow(600)
		//밀리세컨드로 지정 가능
		$('#dog').show('slow',function(){ //effect가 완료되면 호출되는 함수
			alert('노출 완료!')
		}); //end of show
	}); //end of click
	
	$('#btn2').on('click',function(){
		$('#dog').hide(1000,function(){
			alert('숨김 완료');
		}); //end of hide
	}); //end of click
	
	$('#btn3').on('click',function(){
		$('#dog').toggle('slow'); //선택한 요소가 보이면 숨기고, 숨겨져 있으면 보이게 처리
	});
});
</script>
</head>
<body>
	<button id="btn1">Show</button>
	<button id="btn2">Hide</button>
	<button id="btn3">Toggle</button>
	<br>
	<img id="dog" src="../files/dog.png" width="120" height="100" style="display:none;">
</body>
</html>

2. fadeIn

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	$('#btn1').on('click',function(){
		$('#dog').fadeIn('slow'); //0.6초동안 선명해짐
	});
	
	$('#btn2').on('click',function(){
		$('#dog').fadeOut(1000); //1초동안 투명해짐
	});
	
	$('#btn3').on('click',function(){
		$('#dog').fadeToggle('fast');
	});
});
</script>
</head>
<body>
	<button id="btn1">fadeIn</button>
	<button id="btn2">fadeOut</button>
	<button id="btn3">fadeToggle</button>
	<br>
	<img id="dog" src="../files/dog.png" width="120" height="100" style="display:none;">
</body>
</html>

3. fadeTo

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	$('#btn1').on('click',function(){
		//선택한 요소를 지정한 투명도의 값까지 투명하게 지정 0.0 ~ 1.0
		$('#dog').fadeTo('slow',0.3);
	});
	
	$('#btn2').on('click',function(){
		$('#dog').fadeTo('slow',1);
	});
	
	$('#btn3').on('click',function(){
		$('#dog').fadeTo('slow',0);
	});
});
</script>
</head>
<body>
	<button id="btn1">투명도(0.3)</button>
	<button id="btn2">투명도(1)</button>
	<button id="btn3">투명도(0)</button>
	<br>
	<img id="dog" src="../files/dog.png" width="120" height="100">
</body>
</html>

4. slideUp

<title>jQuery</title>
<style type="text/css">
h1{
	width:300px;
	height:200px;
	background-color:#FF0;
}
</style>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	$('#btn1').on('click',function(){
		//위로 올라가면서 숨겨짐
		$('h1').slideUp(1000);
	});
	
	$('#btn2').on('click',function(){
		//아래로 내려가면서 보여짐
		$('h1').slideDown('slow'); //0.6초동안 내려감
	});
	
	$('#btn3').on('click',function(){
		$('h1').slideToggle('fast');
	});
});
</script>
</head>
<body>
	<button id="btn1">slideUp</button>
	<button id="btn2">slideDown</button>
	<button id="btn3">slideToggle</button>
	<br>
	<h1>내용</h1>
</body>
</html>

5. animate

<title>jQuery</title>
<style type="text/css">
h1{width:50px;height:30px;background-color:red;font-size:100%}
h2{width:50px;height:30px;background-color:orange;font-size:100%}
h3{width:50px;height:30px;background-color:aqua;font-size:100%}
</style>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	//animate({애니메이션 속성},효과속도,콜백함수)
	//애니메이션 속성 : 모션으로 적용할 속성을 스타일(CSS)을 이용해 입력
	$('h1').animate({
		marginLeft:'250px'
	},5000,function(){ //5초동안 왼쪽 여백을 만듦(=이동하는것처럼 보여짐)
		alert('도착 완료!');
	});
	
	$('h2').animate({
		marginLeft:'250px',
		opacity:0.3,
		width:'100px',
		height:'100px'
	},5000);
	
	$('h3').animate({
		marginLeft:'250px'
	},3000).animate({
		marginLeft:'100px'
	},2000);
	
});
</script>
</head>
<body>
	<h1>내용</h1>
	<h2>내용</h2>
	<h3>내용</h3>
</body>
</html>

최은서

이전 포스트

[jQuery] Event

다음 포스트

[jQuery] Effect

jQuery

1. show

2. fadeIn

3. fadeTo

4. slideUp

5. animate

[jQuery] Event

[jQuery] UI

0개의 댓글