클릭하면 jquery 애니메이션이 돌아 오지 않습니다

Question

이 jquery 애니메이션에 문제가 있습니다.

요약하면 확장 된 div는 다시 클릭 할 때 돌아 오지 않습니다. 를 교체하려고 :

편집, 감사

여기 http://jsfiddle.net/vtaqm3cb/

이

$(document).ready(function(){ 

    $("#div_menu_icon").click(function(){ 
    var new_size = "250"; //this is the width of the menu when expanded 
    var menu_icon_width = "55px"; 
    var div_menu_open = $("#div_menu").width() >= new_size ? menu_icon_width : new_size ; 


    $('#div_menu').animate({ width: div_menu_open, }, {duration:200,queue: false }); 
    $('#div_menu_icon').animate({ width: div_menu_open }, {duration:200,queue: false }); 
    }); 

}); 

날이 문제를 해결하는 데 도움이 제발 내가 JQuery와에 사용되는 코드의 샘플입니다 : 여기

은 jsfiddle 링크입니다 jsfiddle에서 div_menu의 CSS와이 CSS가 작동합니다. 하지만 내 디자인을위한 경계가 필요해, 그것을 해결할 방법이 있습니까?

#div_menu{ 

background-color:#34495e; 
width:100%; 
height: calc(100% - 50px); 
} 

Answer 1

$(document).ready(function(){ 
    var expanded = false;  
    var new_size = "250"; 
    var menu_icon_width = "55"; 

    $("#div_menu_icon").click(function(){   
     var newWidth = expanded ? menu_icon_width : new_size;   
     $('#div_menu').animate({ width: newWidth }, {duration:200 }); 
     $('#div_menu_icon').animate({ width: newWidth }, {duration:200 });   
     expanded = !expanded; 
    });  
}); 

나는 당신이 작동하지 않는 이유를 알고하지 않습니다, 나는 그것이 그렇지 않으면 버그 나 것이기 때문에 그것으로보고 계속하겠습니다. 그러나 적어도 지금은 논리를 단순화하고 제안 된대로 이벤트 처리기 외부에서 변수를 가져 왔습니다.