ȨÀ¸·Î | ¹«·áȸ¿ø°¡ÀÔ | ¾ÆÀ̵ð/ºñ¹øÃ£±â
ÃßõÀ½¾Ç¹æ¼Û
[jQuery] jQuery fadeIn(), fadeOut(), fadeToggle(), fadeTo() ÀÌÇØÇϱâ
7³â Àü
fadeÀÇ »çÀüÀûÀÎ Àǹ̴ "õõÈ÷ »ç¶óÁö´Ù" , "Á¡Á¡ Èñ¹ÌÇØÁö´Ù" ¶ó´Â ¶æÀÔ´Ï´Ù.

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
        $("#b1").click(function(){
                // õõÈ÷ È­¸é¿¡ ³ªÅ¸³ª°Ô ÇÏ´Â ÇÔ¼ö ÀÔ´Ï´Ù.
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(3000);
        });
        
        $("#b2").click(function(){
                // õõÈ÷ È­¸é¿¡¼­ »ç¶óÁö°Ô ÇÏ´Â ÇÔ¼ö ÀÔ´Ï´Ù.
                $("#div1").fadeOut();
                $("#div2").fadeOut("slow");
                $("#div3").fadeOut(3000);
        });
        
        $("#b3").click(function(){
                // Toggle()Àº (hide,show), (in,out) ÀÇ ±â´ÉÀ» µ¿½ÃÇØ ¼öÇàÇÏ´Â ÇÔ¼ö ÀÔ´Ï´Ù.
                // ±×·¡¼­ fadeToggle()Àº õõÈ÷ »ç¶óÁö°í ³ªÅ¸³ª´Â Çö»óÀ» ¹Ýº¹ÀûÀ¸·Î ¼öÇàÇÕ´Ï´Ù.
                $("#div1").fadeToggle();
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle(3000);
        });
        
        $("#b4").click(function(){
        // fadeTo() ÇÔ¼ö´Â Åõ¸íµµ¸¦ Á¶ÀýÇÏ¿© ¿òÁ÷ÀÓÀ» ¸¸µé¾î ³»´Â ÇÔ¼öÀÔ´Ï´Ù.
        // ±×¸®°í fadeTo() ÇÔ¼ö´Â ´Ù¸¥ ÇÔ¼ö¿Í ´Ù¸£°Ô ¹Ýµå½Ã Åõ¸íµµ¸¦ ¸í½ÃÇØ ÁÖ¾î¾ß ÇÕ´Ï´Ù.
        // Åõ¸íµµ´Â 0¿¡¼­ 1»çÀÌÀÇ °ªÀ¸·Î Åõ¸íµµ¸¦ ³ªÅ¸³À´Ï´Ù.  0ÀÌ¸é ¿ÏÀü ¾Èº¸À̰í 1ÀÌ¸é ¿ÏÀüÈ÷ º¸ÀÔ´Ï´Ù.
        // 0.5¶ó¸é ¹Ý¸¸ Åõ¸íµµ°¡ Àû¿ëµË´Ï´Ù.
                $("#div1").fadeTo("slow",0.1);
                $("#div2").fadeTo("slow",0.5);
                $("#div3").fadeTo("slow",0.9);
        });
});
</script>
</head>
<body>
<p>fadeIn Çö»óÀ» È®ÀÎÇØº¸¼¼¿ä!</p>
<button id="b1">fadeIn ¹öưÀ» Ŭ¸¯Çϼ¼¿ä</button>
<button id="b2">fadeOut ¹öưÀ» Ŭ¸¯Çϼ¼¿ä</button>
<button id="b3">fadeToggle ¹öưÀ» Ŭ¸¯Çϼ¼¿ä</button>
<button id="b4">fadeTo ¹öưÀ» Ŭ¸¯Çϼ¼¿ä</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
ÃßõÃßõ : 350 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
3,033
 PHP Á¤±Ô½Ä Á¤¸®
3,032
 PHP Á¤±Ô½ÄÀ» Ȱ¿ëÇÑ ÅÂ±× ¹× ƯÁ¤ ¹®ÀÚ¿­ Á¦°Å ¹× ÃßÃâ ¹æ¹ý
3,031
 php Å©·Ñ¸µ ¶Ç´Â ÆÄ½Ì ÇÔ¼ö, Á¤±Ô½Ä ¸ðÀ½
3,030
 Á¦ÀÌÄõ¸® ±âº» ¸í·É¾î
3,029
 À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
3,028
 ¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
3,027
 [HTML5]¿¡¼­ frameset ´ëü ¹æ¹ý°ú iframe ¼Ó¼º
3,026
 HTML <Audio> »ç¿ë¹ý
3,025
 À©µµ¿ì10 ½Ã½ºÅÛÆÄÀÏ ¼Õ»ó (Ãʰ£´Ü ¿À·ù º¹±¸¹æ¹ý!!)
3,024
 PHP ÆÄÀÏ Á¸Àç ¿©ºÎ ÆÄ¾ÇÇϱâ(·ÎÄà ÆÄÀÏ Á¸Àç ¹× ¿ø°ÝÁö ÆÄÀÏ Á¸Àç)
3,023
 [CSS] ¹Ú½º ¼¼·Î °¡¿îµ¥ Áß¾Ó Á¤·Ä 6°¡Áö
3,022
 CSS Layout ¼öÆò & ¼öÁ÷ Á¤·Ä
3,021
 ¿©·¯ µµ¸ÞÀÎµé °£ ÄíŰ °øÀ¯Çϱâ
3,020
 ÅÂ±× »çÀÌ¿¡ ÀÖ´Â ÅØ½ºÆ®¸¦ ÃßÃâ
3,019
 [JQuery] textbox focus on offÀ϶§ ¼ýÀÚ ÄÞ¸¶ º¸¿©ÁÖ±â
3,018
 ÄíŰ »ý¼º,°¡Á®¿À±â,»èÁ¦
3,017
 »ç¿ëÀÚ ÇÔ¼ö ¸ðÀ½
3,016
 ¸¶¿ì½º,Űº¸µå Á¦ÇÑ ( ¿À¸¥ÂÊŬ¸¯,µå·¡±×,¿µ¿ª¼±Åõî..)
3,015
 [HTML5] <video> - DOMÀ¸·Î Á¦¾îÇϱâ
3,014
 HTML5 video ű׿¡¼­ ¿µ»ó Á¿ì¹ÝÀü
3,013
 PHP - ƯÁ¤ ÅÂ±× ¹× ¹®ÀÚ¿­ ÃßÃâ, Á¦°Å
3,012
 [PHP] define°ú definedÀÇ Â÷ÀÌ
3,011
 ¿ìŬ¸¯ ¿Ïº®Â÷´Ü ½ºÅ©¸³Æ®
3,010
 iframe ³ôÀÌ 100% ¸ÂÃß±â
3,009
 curl ÇÔ¼ö¸¦ ÀÌ¿ëÇÑ HTTP REFERER º¯°æ
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æÄ§
Copyright (C) musictrot All rights reserved.