![](/bink.gif) |
|
| ![](/bink.gif) |
jQuery stop(),Callback,Chaining |
|
|
![](icon/private_name/1.gif) |
8³â Àü |
jQuery stop()
stop()Àº ¸» ±×´ë·Î ¾î¶² ¾×¼¾ÀÌ ¼öÇàµÉ¶§ ¸ØÃß´Â °ÍÀ» ¸»ÇÕ´Ï´Ù.
±âº» ¹®¹ýÀº $(selector).stop(stopAll,goToEnd); »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.
±âº» ¿¹Á¦
$("#stop").click(function(){
$("#panel").stop();
});
°ü·Ã¿¹Á¦
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">½½¶óÀ̵ù ¸ØÃç¶ó</button>
<div id="flip">½½¶óÀ̵ù Çضó</div>
<div id="panel">Park's ºí·Î±×</div>
</body>
</html>
// ½½¶óÀ̵ùÀ» ÇÏ´Â µµÁß¿¡ "½½¶óÀ̵ù ¸ØÃç¶ó" ¹öÆ°À» Ŭ¸¯ÇÏ¸é ½½¶óÀ̵ùÀÌ ¸ØÃߴ°ÍÀ» º¼ ¼ö ÀÖ½À´Ï´Ù.
jQuery Callback Functions
ÀÚ¹Ù½ºÅ©¸³Æ®´Â ±âº»ÀûÀ¸·Î ÇÑÁÙ¾¿ ½ÇÇàÀÌ µË´Ï´Ù. ±×·¯³ª ¾î¶² °æ¿ì¿¡´Â ÇÔ¼ö°¡ ½ÇÇàÀÌ ³¡³ªÁö ¾Ê¾ÒÀ»¶§ ½ÇÇàÀÌ µÉ¼öµµ Àִµ¥ ±×°ÍÀ» ¹æÁöÇϱâ À§ÇØ callback¸¦ ÀÌ¿ëÇÏ¿© ¿À·ù¸¦ ¸·À»¼ö ÀÖ½À´Ï´Ù.
±âº»¿¹Á¦
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
// À§ ¿¹Á¦´Â PÅÂ±× ±¸¹®À» hide(¼û±è) À» ÁøÇàÇÑ ÈÄ alert ¸Þ½ÃÁö°¡ ³ªÅ¸³³´Ï´Ù.
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
//À§ ¿¹Á¦´Â callbackÀ» ÇÏÁö ¾ÊÀº °æ¿ìÀε¥ À§Ã³·³ ÄÚµùÀÌ µÇ¸é alert ¸Þ½ÃÁö°¡ ¸ÕÀú ³ªÅ¸³ª°í hide¸¦ ½ÇÇàÇÏ´Â ¸ð½ÀÀ» º¼¼ö ÀÖ½À´Ï´Ù.
ÀÌó·³ callbackÀÇ ¿ªÇÒÀº ¼± ÇÔ¼ö¸¦ ½ÇÇà½ÃŲÈÄ ÈÄ ÁøÇàÇÏ°Ô ÇÒ °æ¿ì »ç¿ëÇÕ´Ï´Ù.
jQuery Chaining
chaning´Â ´ÜÀϹ®¿¡¼ ¿©·¯°³ÀÇ jquery ¿É¼ÇÀ» ½ÇÇàÇÒ ¼ö ÀÖ½À´Ï´Ù.
±âº»±¸¹®
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
À§ µÎ ±¸¹®Àº °°Àº °ÍÀÔ´Ï´Ù. ÇÑÁÙ·Î ÄÚµùÀ» ÇصµµÇ¸ç, ¾Æ·§ÁÙ¿¡ ÄÚµùÀ» Çصµ °°Àº Çö»óÀÌ ³ªÅ¸³³´Ï´Ù.
ÇÑÁÙº¸´Ù´Â ¿©·¯ÁÙÀÌ º¸±â°¡ ½±°ÚÁÒ. ±×·¡¼ Àü ÄÚµùÇÒ¶§ ¿©·¯ÁÙ¿¡ ÄÚµùÀ» ÇÕ´Ï´Ù. ¤¾
°ü·Ã¿¹Á¦
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">Àç¹ÌÀÖ´Â jQuery!!</p>
<button>Ŭ¸¯Çغ¸¼¼¿ä</button>
</body>
</html>
// "Ŭ¸¯Çϼ¼¿ä" ¹öÆ°À» Ŭ¸¯Çϸé À§ ±×¸²Ã³·³ "Àç¹ÌÀÖ´Â jQuery" ÀÇ ±¸¹®ÀÌ »¡°£»öÀ¸·Î ¹Ù²î°í slideUp, slideDownÀÌ ½ÇÇàµË´Ï´Ù.
°ýÈ£() ¾ÈÀÇ 2000Àº 2Ãʶó´Â ÀǹÌÀÔ´Ï´Ù. Áï 2Ãʵ¿¾È À§·Î ¿Ã¶ó°¡°í 2Ãʵ¿¾È ¾Æ·¡·Î ³»·Á¿À¶ó´Â ÀǹÌÀÔ´Ï´Ù.
|
|
̵̧ : 292 |
̵̧
¸ñ·Ï
|
|
| ![](/bink.gif) |
|