2010. 12. 28. 11:18 jQuery
.fadeIn() .fadeOut()
.fadeIn() 은 매칭되는 요소가 불투명하게 페이딩 되는 effect 함수이다.
사용문법
.fadeIn( [ duration ], [ callback ] )
.fadeIn( [ duration ], [ easing ], [ callback ] )
※ duration 은 1/1000 초 단위값이다. fast 또는 slow 문자를 가질 수 있다.
사용예
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
With the element initially hidden, we can show it slowly:
$('#clickme').click(function() {
$('#book').fadeIn('slow', function() {
// Animation complete
});
});
.fadeOut()은 매칭되는 요소가 투명하게 페이딩 되는 effect 함수이다.
사용문법
.fadeOut( [ duration ], [ callback ] )
.fadeOut( [ duration ], [ easing ], [ callback ] )
※ duration 은 1/1000 초 단위값이다. fast 또는 slow 문자를 가질 수 있다.
사용예
<!DOCTYPE html>
<html>
<head>
<style>
p { font-size:150%; cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<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>'jQuery' 카테고리의 다른 글
| .innerHeight() .innerWidth() (0) | 2010.12.28 |
|---|---|
| .addClass() .removeClass() (0) | 2010.12.28 |
| .show() .hide() (0) | 2010.12.28 |
| .trigger() (0) | 2010.12.27 |
| .bind() (0) | 2010.12.27 |
