Javascript 如何在脚本完成之前停止Jquery多次运行

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

HTML

---

演示：

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

$(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();
            }); 
       });
 });

---

您的演示无法运行，因为您尚未指定JQuery库。您还应该在问题中包含您的javascript。您没有导入Jquery，并且不清楚何时要使搜索框出现，何时要使其消失“如何使其在再次运行之前运行一次”。您的意思是，当页面加载时？或者，基本上Jquery Stop方法就是这样做的。检查

$(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();
            }); 
        });     
    });
});

$(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();
            }); 
       });
 });