.fadeOut();
선택한 요소를 서서히 사라지게 합니다.
.fadeOut(duration, easing, complete)
duration : 완전히 사라질 때까지의 시간 (fast, slow 혹은 1000분(1초), fast는 200, slow는 600, 기본값 400) .fadeOut("slow") .fadeOut(600)
easing : 사라지는 모양(swing, linear) .fadeOut("linear")
complete : 사라진 다음 불러올 함수 .fadeOut(function(){ //Function });
.fadeIn();
예제1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title> new document </title> <style type="text/css"> #i1{position: absolute;left:0;top:0} #i2{position: absolute;left:180px;top:0} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#a").click(function(){ $("img").fadeOut(); }); }); //]]> </script> </head> <body> <div><img src="images/img_01.jpg" alt="" /></div> <button id="a">OK</button> </body> </html>
예제2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title> new document </title> <style type="text/css"> #i1{position: absolute;left:0;top:0} #i2{position: absolute;left:180px;top:0} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#a").click(function(){ $("img").fadeOut(1000); }); }); //]]> </script> </head> <body> <div><img src="images/img_01.jpg" alt="" /></div> <button id="a">OK</button> </body> </html>
댓글 0
댓글 쓰기 권한이 없습니다.
> | 140808_[jquery] fadeout | 2014.09.23 |