<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
/* border : 2px solid red; */
width : 100px;
height : 100px;
background-color: orange;
font-size: 10pt;
}
</style>
<script src = "js/jquery-3.5.1.min.js"> </script>
<script>
$(document).ready(function(){
$('div').css({
/* width : 100px;
height : 100px;
background-color: red; */
})
$('div').hide(1000) //left-top으로 사라진다
$('div').show(1000) //left-top으로부터 나타난다
$('div').fadeOut(1000) // 크기를 유지한 채 사라진다
$('div').fadeIn(1000) // 크기를 유지한 채 나타난다
$('div').fadeTo(1000, 0.4) // 시간, 투명도
$('div').fadeToggle(1000)
$('div').fadeToggle(1000)
})
</script>
</head>
<body>
<div>100x100<br>사각형</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
h1 {
display: none;
}
</style>
<script src="/Lecture-WEB/jquery/js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
/*
3초에 걸쳐서 "첫번째 문장"이라고 화면에 보인 뒤, complete라는 메세지를 띄우기
*/
// $('h1').show()
// $('h1').show(10)
/* $('h1').show(3000) // 컴퓨터는 수행했다 생각하고 바로 아래 문장을 실행함. 그래서 alert가 먼저 뜨는 것처럼 보임.
alert('complete') */
// show 라는 함수도 callback 함수를 가진다. show가 끝나면 어떤 행동을 하라고 설정할 수 있음.
/* $('h1').show(3000, function() {
alert('comlete')
}) */
/*
3초에 걸쳐서 "첫번쨰 문장"이라고 화면에 보인뒤, 글자색을 파란색으로 변경한 후,
슬라이드 효과로 올라갔다 내려갔다를 수행한 후에, 배경색을 노란색으로 변경
*/
$('h1').show(3000, function() {
$(this).css('color', 'blue')
$(this).slideToggle(1000)
$(this).slideToggle(1000, function(){
$(this).css('background-color', 'yellow')
})
})
/* slideUp() 함수의 반환값이 사용한 그 객체다. 그래서 함수 chaining 기법을 쓸 수 있다.
$('h1').show(3000, function() {
$(this).css('color', 'blue')
$(this).slideUp(1000).slideDown(1000, function() {
$(this).css('background-color', 'yellow')
})
}) */
})
</script>
</head>
<body>
<h1>첫번째 문장</h1>
</body>
</html>