1. image 한 장 준비
2. 여러 가지 이벤트 버튼 준비
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN으로 jQuery 라이브러리 연결하기 - https://cdnjs.com/libraries/jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
$("#hide").click(function(){
//사라지는 시간을 표기 : 밀리초, 'slow', 'fast', 'normal'
// ⚡콜백 함수는 hide 끝나고 호출 됨
$("#i").hide(1000, function(){
alert('hide 끄으으읕')
});
})
//보여주기
$("#show").on('click', function(){
$("#i").show(1000)
})
//toggle은 hide(), show() 교차 실행
$(document).on('click','#toggle', function(){
$("#i").toggle(3000)
})
//점점흐리게
$("#fadeOut").click(function(){
$("#i").fadeOut(3000)
})
//점점 진하게
$("#fadeIn").click(function(){
$("#i").fadeIn(3000)
})
$("#fadeToggle").click(function(){
$("fadeToggle").click(function(){
$("#i").fadeToggle(5000)
})
})
$("#slideUp").click(function(){
$("#i").slideUp(5000);
})
$("#slideDown").click(function(){
$("#i").slideDown(5000);
})
$("#slideToggle").click(function(){
$("#i").slideToggle(5000);
})
})
</script>
</head>
<body>
<h1>이팩트</h1>
<input type="button" value="숨기기" id="hide"/>
<input type="button" value="보여주기(show)" id="show"/>
<input type="button" value="toggle(hide, show)" id="toggle"/>
<input type="button" value="점점흐리기(fadeout)" id="fadeOut"/>
<input type="button" value="점점흐리기(fadeIn)" id="fadeIn"/>
<input type="button" value="fadeToggle" id="fadeToggle"/>
<input type="button" value="slideUp" id="slideUp"/>
<input type="button" value="slideDown" id="slideDown"/>
<input type="button" value="slideToggle" id="slideToggle"/>
<input type="button" value="" id=""/>
<hr />
<img src="../img/swisda.jpg" id="i" />
</body>
</html>
풀스택eDot