2013-01-17 148 views
0

我想在我的網站上使用小型幫助框,由Jquery動畫。一切都很好,但是當我快速進入和離開盒子時,它開始顯示ang瘋狂地隱藏。有什麼辦法如何停止功能隱藏盒? 這裏是我的幫助框:http://jojo.i-web.sk/test/box.php如何停止jquery功能

這是代碼:

<body> 
    <center>!!LOOK AT DOWN RIGHT CORNER!!</center> 
    <div id="help-box"> 
     <div id="help_sipka"> 
      << 
     </div> 
     <div id="help_problem_nadpis"> 
      <h1>Do you have problem?</h1> 
      Click here. 
     </div> 
     <div id="help_problem_button"> 
      <div style="float:right;"><acronym title="Zatvoriť"><input id="help_zavri" class="button_zavri" type="button" value="X"></acronym></div> 
      <h1>Do you have problem?</h1> 
      Have you lost password or found bug? Do you need help<br> 
      We can help you.<br> 
      Send mail to our admins.<br> 
      <input class="button_odosli" type="button" name="posli_mail" value="Send mail"> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     $(function() { 
     var help_finished=1; 

      $('#help-box').mouseenter(function(){ 
       if(help_finished!=2) { 
        help_finished=1; 
        $('#help-box').animate({width:'200'}); 
        $('#help_sipka').delay(500).slideUp();   
        $('#help_problem_nadpis').delay(500).slideDown(); 
       } 
      }); 

      $('#help-box').mouseleave(function(){ 
       if (help_finished ==1) { 
        setTimeout(hide_box, 500); 
        help_finished=0; 
       } 
      }); 

      function hide_box() { 
       if (help_finished==0||help_finished==3) { 
        $('#help_sipka').slideDown();   
        $('#help_problem_nadpis').slideUp(); 
        $('#help-box').delay(300).animate({width:'30'}); 
       } 
      } 

      $('#help_zavri').click(function(){ 
       help_finished=3 
       $('#help_problem_button').slideUp(); 
       $('#help-box').animate({opacity:'0.75'}); 
       hide_box();   
      }); 

      $('#help-box').click(function(){ 
       if(help_finished!=3) { 
        help_finished=2; 
        $('#help-box').animate({opacity:'1'}); 
        $('#help_problem_button').slideDown(); 
        $('#help_problem_nadpis').slideUp(); 
       } 
      }); 
     }); 
    </script> 
</body> 
+0

'$( '#求助箱')停止(真,真).animate({W上。寬度:'200'});' – adeneo

回答

2

使用jQuery的stop方法:

// Will stop the current animation and then start a fadeout. 
$(this).stop(true, true).fadeOut(); 
在你的榜樣

所以,你可能會想這樣做:

$('#help-box').stop(true,true).animate({width:'200'}); 

此外,您還可以看看燒成通過使用完成的委託之後的下一個動畫,因此您不需要硬編碼延遲:

$('#help-box').stop(true,true).animate({width:'200'}, function() { 
     $('#help_sipka').slideUp(function() { 
      $('#help_problem_nadpis').slideDown(); 
     }); 
}); 

由於您使用超時,您將需要保持在一個變量周圍,清除它,使用clearTimeout你設置一個新的超時功能之前:

// keep this variable scoped outside the method call. 
var timeout; 

//... Whenever you set the timeout, clear it before you set a new one. 
clearTimeout(timeout); 
timeout = setTimeout(hide_box, 500); 
+0

問題是,當我離開helpbox時,我打電話給setTimeout(hide_box,500)...然後我進入並離開,並且一次又一次地調用setTimeout(hide_box,500),即使第一個功能還沒有結束......所以它不是我需要停止的動畫,而是。我必須停止調用hide_box函數直到第一次結束。但我不知道如何。 – jojo3696

+0

@ jojo3696我添加了關於清理超時的信息。 –

+0

非常感謝...現在它工作完美:) – jojo3696

1

是的,這是.stop()

當你開始一個新的動畫,你可以做到這一點。

$('selector').stop(true, true).animate({}); 

stop()這些參數清除jQuery的動畫隊列,並迫使當前動畫停止,使該訴訟動畫立即啓動。

Documentation