ȸ¿ø°¡ÀԡžÆÀ̵ð/ºñ¹øã±â
ȨÀ¸·Î

[jQuery] jQuery fadeIn(), fadeOut(), fadeToggle(), fadeTo() ÀÌÇØÇϱâ
8³â Àü
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>
ÃßõÃßõ : 427 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
2,675
[Shoutcast] ÇöÀç Ç÷¹À̵Ǵ °î¸í ½ºÅ©¸³Æ® PHP
2,674
[Shoutcast] ½ºÆ®¸®¹Ö ³ë·¡Á¦¸ñÀ» º¯°æ ½ºÅ©¸³Æ®
2,673
Shoutcast PHP Scripts
2,672
FTP¿¡¼­ »èÁ¦ ¾ÈµÇ´Â ÆÄÀÏÀ̳ª Æú´õ »èÁ¦Çϱâ
2,671
SHOUTcast ¸¦ ÀÌ¿ëÇÑ ÀÎÅÍ³Ý ¶óÀÌºê ¹æ¼Û ½Ã½ºÅÛ ±¸Ãà
2,670
DAUM ¿ìÆí¹øÈ£ ¼­ºñ½º È°¿ëÇϱâ
2,669
½ÇÇàÁß PHP ¿¡·¯ ¸Þ½ÃÁö ·¹º§ Á¶Á¤Çϱâ
2,668
PHP ÀÎÁ§¼Ç°ú file get contentsÀÇ °ü°è
2,667
¹®ÀÚ¿­ ±ÛÀÚ ¼ø¼­ °Å²Ù·Î µÚÁý±â, ¾ÕµÚ ¹ÝÀü Reverse String
2,666
¹è¿­ ¿ä¼Ò ¼ø¼­ °Å²Ù·Î µÚÁý±â, ¾ÕµÚ ¹ÝÀü Reverse Array
2,665
php ¸Þ¸ð¸® »ç¿ë
2,664
ÀÚ¹Ù½ºÅ©¸³Æ® ³»ºÎ °´Ã¼ º¸±â
2,663
ÀÚ¹Ù ½ºÅ©¸³Æ® ¼ýÀÚ Ã³¸® ÄÞ¸¶ ó¸®
2,662
ÀÚ¹Ù½ºÅ©¸³Æ® Base64 encode, decode
2,661
PHP ¹®ÀÚ¿­ °ü·Ã ÇÔ¼ö
2,660
[php] ¹®ÀÚ¿­À» ³ª´©°Å³ª ÇÕÄ¡´Â explode, implode ÇÔ¼ö
2,659
php ¹®ÀÚ¿­ ÀÚ¸£±â ³ª´©±â ºÐ¸®Çϱâ - explode() , split()
2,658
DB Á¢±Ù ¹× Äõ¸®¹®(insert,select,update,delete)
2,657
[MySQL] Çʵ忡¼­ ƯÁ¤¹®ÀÚ Æ÷ÇÔ ¶Ç´Â Á¦¿ÜÇÑ DB °Ë»ö, LIKE ,NOT
2,656
php5 mysqli µðºñ Á¢¼Ó Ŭ·¡½º ÇÁ·Î±×·¥ ¹× »ç¿ë¹ý
2,655
PHP ¹®ÀÚ¿­ ³ª´©±â - explode()
2,654
[PHP] ¹è¿­ Array
2,653
php ¹è¿­
2,652
[php] Array() ¹è¿­À̶õ?
2,651
PHP ¹è¿­ ÇÔ¼ö Á¤¸®
2,650
PHP ±âº»ÀûÀÎ ¹è¿­ »ç¿ë¹ý
2,649
html¿¡¼­ ÀÔ·ÂÇÑ°ª DB¿¡¼­ ¹Þ¾Æ¿À±â (µµ¼­Á¤º¸ °Ë»ö)
2,648
SQL Äõ¸® Á¤¸®
2,647
[MySql]DB¿¡¼­ ¼­·Î ´Ù¸¥ Å×À̺íÀÇ µ¥ÀÌÅ͸¦ Çѹø¿¡ ºÒ·¯¿À±â
2,646
jquery checkbox Àüü ¼±ÅÃ, Àüü ÇØÁ¦, üũ °ª ÃßÃâ
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.