Javascript 如何防止jquery函数在执行另一个函数之前执行

我有以下JQuery函数：

1st

$(function(){

  //  Accordion Panels
  $(".staffDiv div").hide();

  $(".staffDiv img").hover(function(){

      // $(".staffDetails").slideUp("fast");

      $(this).next(".staffDetails").slideToggle("slow").siblings(".staffDetails:visible").slideUp("fast");
      $(this).toggleClass("current");
      $(this).siblings("div").removeClass("current");

  });
});

第二名

$(function(){

    $(".branchDiv").click(function(){
        var toggleWidth = $(this).width() == 450 ? "175px" : "450px";
        $(this).animate({ width: toggleWidth });
    });
});

如果第二个尚未执行，如何防止第一个执行

---

编辑 这是我现在的新代码：

$(function(){
$(".staffDiv div").hide();
$(".branchDiv").click(function(){
        var toggleWidth = $(this).width() == 450 ? "175px" : "450px";
        $(this).animate({ width: toggleWidth });

        $(".staffDiv div").hide();
          $(".staffDiv img").hover(function(){
              $(this).next(".staffDetails").slideToggle("slow").siblings(".staffDetails:visible").slideUp("fast");
          });
  });
});

编辑这是HTML代码。我应该继续我正在做的事情，还是放弃那些花哨的效果，制作一个经典的组织结构图

<div class='branchDiv'> 
<div class='staffDiv'>
    <img class='staffPic' src='images/upload/1378622_10202067392155670_1672420239_n.jpg'/>
    <div class='staffDetails'>
        Name:n m n<br/>
        Position:m<br/>
        Specialization:m34<br/>

    </div>
</div>
</div>

名称：n m n

职位：m

专业化：m34

最简单的方法是将第一个嵌套在第二个中（同步您没有执行任何异步操作）：

---

如果第一个应该发生在

onclick

中，请将代码移动到

$下（此）。动画
调用
很抱歉，但您的问题令人困惑，因为两个代码体都是事件处理程序。这些事件处理程序将在事件发生时执行回调（在第一个块中悬停，在第二个块中单击）。您无法控制这些事件何时发生，这取决于用户的操作。@jfriend00我根据Rob先生的回答编辑了我的代码。请再次查看。您不想在
处理程序中安装
.hover（）
事件处理程序。单击（）。每次单击时，您将安装另一个
.hover（）
处理程序，并且将安装多个处理程序。我建议你做的是备份和描述你正在努力完成的事情，然后我们可以帮助建议什么样的代码可以做到这一点。组织结构图有分支，因此最初为了节省空间，分支被最小化，细节被隐藏。鼠标单击将使分支增长，鼠标悬停将显示员工详细信息。我只是在给自己制造麻烦吗？
.hover（）
应该在
.click（）
之外。其他人很难给出建议，因为他们无法看到你的HTML，也无法理解你需要帮助的具体问题，我将鼠标悬停在图像上，会显示一些详细信息。但是，当我再次单击DIV时，宽度会减小，但我可以触发鼠标悬停，而无需单击。我已经更新了我的示例，该示例使用一个标志来控制鼠标悬停事件操作，直到不起作用。关闭DIV后，鼠标悬停会激活
$(function(){
  // this will dictate whether the hover event does anything
  var open = false;

  $(".branchDiv").click(function(){
     var toggleWidth = $(this).width() == 450 ? "175px" : "450px";
     $(this).animate({ width: toggleWidth });
     open = ($(this).width() > 175);
  });

  $(".staffDiv div").hide();

  $(".staffDiv img").hover(function(){
      if(open){
         $(this).next(".staffDetails").slideToggle("slow").siblings(".staffDetails:visible").slideUp("fast");
         $(this).toggleClass("current");
         $(this).siblings("div").removeClass("current");
      }
  });
});