Jam's story
[JQuery] Fade 본문
- fadeIn
- fadeOut
- fadeTo
- fadeToggle
fadeIn()- 희미하게 나타난다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.10 16:11:24</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
span {
color: red;
cursor: pointer;
}
div {
margin: 3px;
width: 80px;
display: none;
height: 80px;
float: left;
}
#one {
background: #f00;
}
#two {
background: #0f0;
}
#three {
background: #00f;
}
</style>
</head>
<body>
<h3>ex05.html</h3>
<pre>
</pre>
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<script>
$( document.body ).click(function() {
$( "div:hidden" ).first().fadeIn( "slow" );
});
</script>
</body>
</html>
fadeIn()- 희미하게 나타난다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeIn demo</title>
<style>
p {
position: relative;
width: 400px;
height: 90px;
}
div {
position: absolute;
width: 400px;
height: 65px;
font-size: 36px;
text-align: center;
color: yellow;
background: red;
padding-top: 25px;
top: 0;
left: 0;
display: none;
}
span {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>
Let it be known that the party of the first part
and the party of the second part are henceforth
and hereto directed to assess the allegations
for factual correctness... (<a href="#">click!</a>)
<div><span>CENSORED!</span></div>
</p>
<script>
// a태그를 누르면 ,div가 3초동안 fadeIn 완료된 후에, span태그 fadein
$( "a" ).click(function() {
$( "div" ).fadeIn( 3000, function() {
$( "span" ).fadeIn( 100 );
});
return false;
});
</script>
</body>
</html>
fadeOut()- 희미하게 사라진다.
hide() 처럼 보일 지 몰라도, 투명도가 희미해지면서 사라지는 것이 차이점!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.10 16:23:20</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
p {
font-size: 150%;
cursor: pointer;
}
</style>
</head>
<body>
<h3>ex05_03.html</h3>
<p>
If you click on this paragraph
you'll see it just fade away.
</p>
<script>
$( "p" ).click(function() {
$( "p" ).fadeOut( "slow" );
});
</script>
</body>
</html>
fadeTo() - 점점사라지다가 지정값까지만 희미해진다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeTo demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>
Click this paragraph to see it fade.
</p>
<p>
Compare to this one that won't fade.
</p>
<script>
$( "p" ).first().click(function() {
$( this ).fadeTo( "slow", 0.33 );
});
</script>
</body>
</html>
fadeToggle() -(버튼을 누르면 ) 사라졌다가 (또 버튼을 누르면 ) 다시 나타난다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeToggle demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>
<p>This paragraph has a fast animation.</p>
<div id="log"></div>
<script>
$( "button" ).first().click(function() {
//첫번째 버튼을 누르면
//첫번째 p를 천천히 등속도로 사라지게 한다. (나타나게 한다. )
$( "p" ).first().fadeToggle( "slow", "linear" );
});
$( "button" ).last().click(function() {
//마지막버튼을 누르면
//마지막 p를 빨리 사라지게하고,(나타나게하고)
//완료된 후 호출되는(콜백함수)에 log인 곳에 div태그 추가
$( "p" ).last().fadeToggle( "fast", function() {
$( "#log" ).append( "<div>finished</div>" );
});
});
</script>
</body>
</html>
'WEB > JQuery' 카테고리의 다른 글
| [JQuery] custom- animate (0) | 2022.06.10 |
|---|---|
| [JQuery] Slide (0) | 2022.06.10 |
| [JQuery] hide (0) | 2022.06.10 |
| [JQuery] on() 메소드 (0) | 2022.06.10 |
| [JQuery] 메뉴클릭하면 글이 나오도록 (0) | 2022.06.06 |
Comments