如何阻止Jquery运行多次直到脚本完成

Question

目前我有一个搜索图标，当它悬停在它上面时打开搜索框，当鼠标离开它时关闭搜索栏。但是我不明白如何在运行一次之前运行一次。

HTML

<div id="search-container"> 
    <input type="submit" name="ctl00$btnSearch" value="Go" id="ctl00_btnSearch" class="trigger searchbutton search-bg"> 
    <div class="search-bar"> 
     <input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" class="searchbox" value="Search" onfocus="this.value=''"> 
    </div> 
</div> 

的JavaScript

$(document).ready(function() { 
    $('#search-container .trigger').mouseover(function() { 
     $('section .search-bar input').animate({width:"150px"}, 750, function(){ 
      $(this).find('input').first().focus(); 
     });  
     $('.search-bar').animate({width:"185px"}, 750, function(){ 
      $(this).find('input').first().focus(); 
     }); 
     $("#search-container .trigger").mouseleave(function(){ 
      $("section .search-bar input, .search-bar").animate({width:"0px"}, 750, function(){ 
       $(this).find('input').first().focus(); 
      }); 
     });  
    }); 
}); 

演示：http://jsfiddle.net/fmrfL/

Answer 1

您可以使用下面的代码的函数中：

$(document).ready(function() { 
    $('#search-container .trigger').mouseover(function(e) { 
     $('section .search-bar input').stop(true,true).animate({width:"150px"}, 750, function(){ 
      $(this).find('input').first().focus(); 
     });  
     $('.search-bar').stop(true,true).animate({width:"185px"}, 750, function(){ 
      $(this).find('input').first().focus(); 
     }); 
     }); 
     $("#search-container .trigger").mouseleave(function(e){ 
      $("section .search-bar input, .search-bar").stop(true,true).animate({width:"0px"}, 750,       
       function(){ 
       $(this).find('input').first().focus(); 
      }); 
     }); 
});