어떻게이 애니메이션에서 콜백을 호출 할 수 없습니까?

Question

나는 어리석은 짓을하고있을 것입니다.하지만 오늘은 어떤 이유로 생각할 수 없습니다.

나는 세 개의 div가 있으며 모두 "staff_member"클래스를 가지고 있습니다. div를 클릭하면 폭이 확장되고 다른 두 div가 축소됩니다. 다른 div를 클릭하면이 div가 확장되고 다른 div는 축소됩니다. 이 모든 것이 잘 작동합니다. 그러나 다시 함수를 원한다면 다시 확장 된 div를 클릭하면 세 개의 div가 모두 정상 크기로 돌아갑니다 (이전에 확장 된 div를 축소하고 수축 된 div를 늘림).

콜백을 다시 추가하면 아무것도하지 않고, 별도의 함수로 실행하려고하면 확장 된 div가 축소되고 다시 확장됩니다. Heres는

내 코드 :

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%"}); 
     }); 
    } 
}); 

보통 너비는 무엇인지 표시하지 않으므로 기입 해 주시면됩니다.