javascript - 如何在脚本完成之前阻止 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();
            }); 
       });
 });