为什么我不能在这个动画上调用回调

Question

我可能在做一些愚蠢的事情，但由于某种原因，我今天无法想象。

我有三个div，他们都有一类“staff_member”。当你点击一个div时，它的宽度应该扩大，另外两个div缩小。如果你点击不同的div，这个div现在应该展开，其他div缩小。这一切工作正常。但是，我想要一个回调函数，所以如果再次单击展开的div，它应该将所有三个div都返回到正常大小（缩小之前展开的div并缩小缩小的div。）

如果我添加一个回调它什么都不做，如果我尝试将它作为一个单独的函数运行，那么展开后的div会缩小并再次展开。

继承人我的代码：

jQuery(document).ready(function() { 

    var regionWidth = jQuery(".region-panels").width(); 
    jQuery(".staff_wrapper").css("width",regionWidth*0.84); 

    var halfRegion = regionWidth/2; 
    var howMany = jQuery(".staff_member").length; 
    var makeMeThin = halfRegion/howMany; 

    jQuery(".staff_member").css("width",makeMeThin); 
    jQuery(".staff_member img").css("cursor", "pointer"); 

    jQuery(".staff_member").click(function() { 
     jQuery(".expanded").removeClass("expanded"); 
     jQuery(this).addClass("expanded"); 
     jQuery(".staff_member").not(this).animate({"width":"5%"}, function(){ 
      jQuery(".expanded").stop().animate({"width":"84%"}); 
     }); 
    }, function(){ 
     jQuery(".staff_member").animate({"width":makeMeThin}); 
    }); 

}); 

Answer 1

要在扩大后的部分点击，做不同的事情，你只需要单击处理程序，以检查是否有点击的项目已经展开，或不：

jQuery(".staff_member").click(function() { 
    if (jQuery(this).hasClass("expanded")) { 
     // clicked item already expanded, set all back to normal width 
     jQuery(".expanded").removeClass("expanded"); 
     jQuery(".staff_member").animate({"width": "50%"}); // you add right code for setting to normal width 
    } else { 
     // clicked on item was not already expanded 
     jQuery(".expanded").removeClass("expanded"); 
     jQuery(this).addClass("expanded"); 
     jQuery(".staff_member").not(this).animate({"width":"5%"}, function(){ 
      jQuery(".expanded").stop().animate({"width":"84%"}); 
     }); 
    } 
}); 

你不会在你的代码中显示正常宽度是什么，所以我会留下你的填写。