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

[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,705
jQuery.getJSON, JSON µ¥ÀÌÅ͸¦ ·Îµå
2,704
jQuery length¿Í slideToggle ¿¹Á¦
2,703
[CSS] before¿Í after ¼±ÅÃÀÚ¸¦ ÀÌ¿ëÇÏ¿© Float ¼Ó¼º ÇØÁ¦
2,702
jQuery toggleClass() Methods
2,701
jQuery stop(),Callback,Chaining
2,700
jQuery Effects - Animation
2,699
jQuery Effects - Sliding
2,698
jQuery fadeIn(), fadeOut(), fadeToggle(), fadeTo()
2,697
jQuery hide(), show(), toggle()
2,696
jquery trigger(), ÇÔ¼ö ½ÇÇà½ÃÅ°±â
2,695
ºñ¹Ð¹øÈ£(Æнº¿öµå) À¯È¿¼º üũ (¹®ÀÚ, ¼ýÀÚ, Ư¼ö¹®ÀÚÀÇ Á¶ÇÕÀ¸·Î 6~16ÀÚ¸®)
2,694
PHP ¹®ÀÚ¿­¿¡ ÇѱÛÀÌ Æ÷ÇԵǾî ÀÖ´ÂÁö üũ
2,693
ÇѱÛüũ(preg match)
2,692
javascript escape/unescape -> php
2,691
Æú´õ¾ÈÀÇ ÆÄÀÏ °¡Áö°í ³î±â
2,690
Á¤±Ô Ç¥Çö½ÄÀ¸·Î ÇÑ±Û ¹®ÀÚ Æ÷ÇÔÇÏ´ÂÁö È®ÀÎÇϱâ
2,689
À¯´ÏÄڵ带 ÀÌ¿ë ÇÑ±Û Ãʼº, Áß¼º, Á¾¼ºÀ¸·Î ÂÉ°³±â - ÇѱÛ/¿µ¹® º¯È¯
2,688
ÇÑ±Û Ãʼº,Áß¼º,Á¾¼º ÀÚ¸£±â ÇÔ¼ö
2,687
ÆÄÀ̽㿡¼­ À¯´ÏÄÚµå ½ºÆ®¸² ´Ù·ç±â
2,686
Python 2.x ÇÑ±Û ÀÎÄÚµù °ü·Ã Á¤¸®
2,685
%uABCD%u1234 °°Àº urlÀÇ À¯´ÏÄÚµå µðÄÚµù
2,684
ÇѱÛ, ÇÑÀÚ¸¦ À¯´ÏÄÚµå·Î º¯È¯Çϱâ
2,683
°æ·Î ºÐ¸®Çϱâ
2,682
ÇÑ±Û ASCII Äڵ带 À¥ URL¿¡¼­ »ç¿ëµÇ´Â UTF8 ÄÚµå·Î º¯È¯
2,681
Unicode (UTF-8) ÀÎÄÚµù¿¡¼­ ÇÑ±Û ±ÛÀÚ¼ö Ãâ·Â ¹× iconv substr
2,680
PHP¿¡¼­ À¯´ÏÄÚµå·Î ¹®ÀÚ¿­ ÀÎÄÚµùÇϱâ
2,679
[JavaScript] µÚ·Î°¡±â È÷½ºÅ丮°¡ ¾ø´Â °ÍÀ» ¾î¶»°Ô ¾Ë ¼ö ÀÖÀ»±î?
2,678
htmlspecialchars, entity decode
2,677
Php : Finding Chrome and Safari Browsers
2,676
[Shoutcast] jPlayer and Shoutcast Configuration
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.