s01_show.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>효과</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
//태그 노출 이벤트 연결
$('#btn1').on('click',function(){
//속도값 : fast(200),normel(400),slow(600)-밀리세컨드 지정 가능
//태그 노출 // 속도값, 태그의 노출이 완료된 후 호출되는 함수
$('#dog').show('slow',function(){
alert('노출완료!!');
});
});
//태그 숨기기 이벤트 연결
$('#btn2').on('click',function(){
$('#dog').hide(1000,function(){
alert('숨김완료!!');
});
});
//태그 노출, 숨김 이벤트 연결
$('#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>
s02_fadeIn.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>효과</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$('#btn1').on('click',function(){
$('#dog').fadeIn('slow');
});
$('#btn2').on('click',function(){
$('#dog').fadeOut(1000);//slow대신 사용가능
});
$('#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>
<div>
<img id="dog" src="../files/dog.png" width="120" height="100" style="display:none;">
</div>
</body>
</html>
s03_fadeTo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fadeTO</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$('#btn1').on('click', function() {
//속도값,투명도
$('#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>
<div>
<img id="dog" src="../files/dog.png" width="120" height="100">
</div>
</body>
</html>
s04_slideUp.htmls
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>slideUp/slideDown/slideToggle</title>
<style type="text/css">
h1{
width:300px;
height:200px;
background-color:#FF0;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$('#btn1').on('click',function(){
//위로 올라가면서 숨겨짐
$('h1').slideUp(1000);
});
$('#btn2').on('click',function(){
//아래로 내려가면 보여짐
$('h1').slideDown(1000);
});
$('#btn3').on('click',function(){
$('h1').slideToggle(1000);
});
});
</script>
</head>
<body>
<button id="btn1">slideUp</button>
<button id="btn2">slideDown</button>
<button id="btn3">slideToggle</button>
<h1>내용</h1>
<br>
</body>
</html>
05_animate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니매이션</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>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
//animate({애니메이션 속성},'효과속도',콜백함수)
//애니메이션 속성: 모션으로 적용할 속성을 스타일(CSS)을 이용해 입력
$('h1').animate({
marginLeft:'250px'
},5000,function(){//애니메이션 종료시 수행할 작업
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>
