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

[jQuery] animate()¿¡¼­ stop()ÀÇ Á߿伺
7³â Àü
jQuery·Î ¾Ö´Ï¸ÞÀ̼ÇÀ» ±¸ÇöÇÒ ¶§ ÈçÈ÷ ¸¸³ª°Ô µÇ´Â ¹®Á¦°¡ Çϳª ÀÖ´Ù. ¹Ù·Î ¾Ö´Ï¸ÞÀÌ¼Ç Å¥(queue) ÀÌ´Ù.


¿¹¸¦ µé¾î, ³×ºñ°ÔÀÌ¼Ç ¸Þ´º¿¡ ¸¶¿ì½º°¡ ¿À¸é ¾Ö´Ï¸ÞÀ̼ÇÀÌ µ¿ÀÛÇÏ°Ô ÄÚµùÀÌ µÈ °æ¿ì, ¸¶¿ì½º¸¦ ¿©·¯¹ø ¿òÁ÷¿´À» ¶§, ÀÌÀü ¾Ö´Ï¸ÞÀ̼ÇÀÌ ¸ØÃß±â Àü±îÁö ¸¶Áö¸· ¾Ö´Ï¸ÞÀ̼ÇÀÌ µ¿ÀÛÇÏÁö ¾Ê´Â Çö»óÀÌ ¹Ù·Î ¾Ö´Ï¸ÞÀÌ¼Ç Å¥·Î ÀÎÇØ ¹ß»ýÇÏ´Â ¹®Á¦´Ù.


ÀÌ·¯ÇÑ ¹®Á¦°¡ ÀϾ´Â ÀÌÀ¯´Â À̺¥Æ®°¡ ÀϾ ¶§¸¶´Ù Å¥¸¦ ¸¸µé±â ¶§¹®¿¡ À̵éÀÌ ¼øÂ÷ÀûÀ¸·Î ÁøÇàµÇ¸é¼­ '¿øÇÏÁö ¾Ê´Â' È¿°ú°¡ ³ªÅ¸³ª´Â °ÍÀÌ´Ù.

»ç½Ç ¸»·Î´Â Ç¥ÇöÀÌ ¾î·Á¿îµ¥ ¾Æ·¡ ¿¹Á¦¸¦ º¸¸é ¹Ù·Î ¾Ë ¼ö ÀÖ´Ù.
$(".nostop li").hover(
  function () {
      $(this).animate({width:"200px"},500);
  },
   function () {
    $(this).animate({width:"80px"},500);
  }
);

//animate with stop()
$(".stop li").hover(
  function () {
      $(this).stop().animate({width:"200px"},500);
  },
   function () {
    $(this).stop().animate({width:"80px"},500);
  }
);
div {
    font: 12px black;
    margin: 40px 0 10px 0;
}

li{
    width:80px;
    height:40px;
    background:#444;
    margin-bottom:10px;
}

.stop li{
    background:#000;
}
<div>±âÁ¸ À̺¥Æ®¿¡ ´ëÇÑ Ã³¸®°¡ ¾ÈµÇ¾î ÀÖ´Â °æ¿ì</div>
<ul class="nostop">
    <li></li>
    <li></li>
    <li></li>
</ul>

<div>±âÁ¸ À̺¥Æ®¿¡ ´ëÇÑ Ã³¸®°¡ µÇ¾î ÀÖ´Â °æ¿ì</div>
<ul class="stop">
    <li></li>
    <li></li>
    <li></li>
</ul>

<div>°¢ Ç׸ñ¿¡ ¸¶¿ì½º¸¦ ¿Ã·Á³õ±â¸¸ ÇßÀ» ¶§´Â Â÷ÀÌ°¡ µå·¯³ªÁö ¾Ê´Â´Ù.<br/><br/>¸¶¿ì½º¸¦ À§¾Æ·¡·Î ¿©·¯Â÷·Ê ºü¸£°Ô ¿òÁ÷¿©º¸¸é ±âÁ¸ ¾Ö´Ï¸ÞÀÌ¼Ç À̺¥Æ®¿¡ ´ëÇÑ Ã³¸®¸¦ ÇØÁØ °Í°ú ÇØÁÖÁö ¾ÊÀº Â÷ÀÌ°¡ µå·¯³­´Ù.</div>

À§ÀÇ ¿¹Á¦¸¦ º¸¸é µÎ °¡Áö ÄÉÀ̽º°¡ ³ª¿Â´Ù. À§ÀÇ °æ¿ì ¸¶¿ì½º¸¦ ¿©·¯¹ø À§¾Æ·¡·Î ¿òÁ÷ÀÌ¸é ¿òÁ÷ÀΠȽ¼ö¸¸Å­ ¹Ù ¾Ö´Ï¸ÞÀ̼ÇÀÌ ¹Ýº¹µÇ´Â °ÍÀ» º¼ ¼ö ÀÖ´Ù. ¹Ý¸é ¾Æ·¡ÀÇ °æ¿ì ¸¶¿ì½º¸¦ ¿Ã·Á³õÀº ¹Ù¿¡¼­¸¸ ¾Ö´Ï¸ÞÀ̼ÇÀÌ µ¿ÀÛÇÑ´Ù.


¾Æ·¡¿Í °°ÀÌ ±âÁ¸ ¾Ö´Ï¸ÞÀ̼ÇÀ» Áß´ÜÇÏ°í ÇöÀç ¾Ö´Ï¸ÞÀ̼Ǹ¸ º¸¿©Áֱ⠿øÇÒ ¶§´Â jQuery°¡ Á¦°øÇÏ´Â .stop() ¸Þ¼­µå Çϳª¸¸ ½áµµ Çѹø¿¡ ÇØ°áµÈ´Ù.



$(".trigger-element").hover(function() {
                $(this).stop().animate({ width: "100px"}, 500);
        }, function() {
                $(this).stop().animate({ width: "80px" }, 500);
        });


.stop() ÀÌ È£ÃâµÇ¸é ÇöÀç µ¿ÀÛÇÏ°í ÀÖ´Â ¾Ö´Ï¸ÞÀ̼ÇÀº Áï½Ã µ¿ÀÛÀÌ ÁߴܵȴÙ. ±×¸®°í Å¥À׵Ǿî ÀÖ´Â °Í ´ë½Å¿¡ ´ÙÀ½ µ¿ÀÛÀÌ Áï½Ã ¼öÇàµÈ´Ù. ÇÏÁö¸¸ .stop()Àº ¾Ö´Ï¸ÞÀ̼ǿ¡ ´ëÇؼ­¸¸ µ¿ÀÛÇϱ⠶§¹®¿¡ ´Ù¸¥ Á¾·ùÀÇ Å¥¸¦ Áß´ÜÇÏ°í ½Í´Ù¸é, .clearQueue() ¸¦ ´ë½Å »ç¿ëÇØ¾ß ÇÑ´Ù.
ÃßõÃßõ : 302 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
2,765
ÀÚ¹Ù½ºÅ©¸³Æ® ¿¬½À ¿¹Á¦ - ·£´ýÇÏ°Ô ¿òÁ÷ÀÌ´Â ÅؽºÆ® ¸¸µé±â
2,764
jQuery Mobile¿¡¼­ À¯¿ëÇÑ ÄÚµå 10°¡Áö
2,763
ÀÚ¹Ù½ºÅ©¸³Æ®·Î º¹»çÇϱ⠱â´É ±¸ÇöÇϱâ
2,762
[JqueryMobile] - Jquery Mobile È­¸é °­Á¦ ȸÀü
2,761
jQuery – ½º¸¶Æ®Æù ½ºÅ©¸° ȸÀü °¨Áö ½ºÅ©¸³Æ®
2,760
javascript audioÆÄÀÏ Àç»ý
2,759
javascript º¯¼ö scope shadowing Ŭ·ÎÀú
2,758
javascript ¹Ýº¹¹®
2,757
javascript Á¶°Ç¹®
2,756
javascript ¹è¿­
2,755
javascript ¿¬»êÀÚ¿Í ÇÔ¼ö
2,754
javascript ÀÚ·áÇü
2,753
javascript º¯¼ö
[jQuery] animate()¿¡¼­ stop()ÀÇ Á߿伺
2,751
javascript audioÆÄÀÏ Àç»ý
2,750
[jQuery.$ajax]mysql + php ¼­¹ö¿¡¼­ json µ¥ÀÌÅÍ ¾ò¾î¿À±â
2,749
Daum¿¡¼­ »ç¿ëÇÏ°í ÀÖ´Â ¸¶¿ì½º ¿À¸¥ÂÊ »ç¿ë ±ÝÁö ½ºÅ©¸³Æ®
2,748
MP3 ¸µÅ©½Ã ½ºÆ®¸®¹Ö µÇÁö ¾Ê°í ´Ù¿î·Îµå µÇµµ·Ï ¸¸µé±â
2,747
jQuery ºñµ¿±â Ajax Åë½ÅÀ» Çغ¸ÀÚ!! - JSON¹æ½Ä
2,746
[jQuery] load ¸¦ ÀÌ¿ëÇÑ ½Ç½Ã°£ ÆäÀÌÁö °¡Á®¿À±â
2,745
[jQuery]ºñµ¿±âÀûÀ¸·Î JSONÆÄÀÏ ·Îµå
2,744
[jQuery]µ¿ÀûÀ¸·Î ¿ø°Ý ÆäÀÌÁö ·Îµå
2,743
[jQuery]¿öÅ͸¶Å© ÅؽºÆ®¹Ú½º ÄÁÆ®·Ñ ±¸Çö
2,742
[jQuery]Æ®¸®ºä ÄÁÆ®·Ñ
2,741
[jQuery]¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú ¸ØÃß±â - stop()
2,740
[jQuery]¿©·¯°¡Áö È¿°ú µ¿½Ã ó¸® - animate()
2,739
[jQuery]½½¶óÀÌµå ¾÷
2,738
[jQuery]½½¶óÀÌµå ¾÷/´Ù¿î - slideToggle()
2,737
[jQuery] scroll down °ú scroll up ÇÒ¶§ À̺¥Æ® Àû¿ë½ÃÅ°±â
2,736
[jQuery]addClass() : ½ºÅ¸ÀÏ Ãß°¡ [removeClass()]
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.