반응 형 디자인의 라디오 버튼을 통해 여러 div에 애니메이션 적용

Question

다른 라디오 버튼을 클릭하여 크기를 변경하는 여러 div가 있습니다. 작은 창 크기의 라디오 버튼을 클릭하면 div가 축소됩니다. 그 후 창 크기를 조정하면 (크기를 크게하는 경우) div가 다시 커지도록 다른 라디오 버튼을 클릭하면 원래 크기의 100 %까지 증가하지 않습니다. 문제가 무엇입니까? 난 이미 CSS의 비율을 사용합니다 여기

<div id="kunstmuseum"></div> 

: 여기

<input id="kunst_radio1" type="radio" name="kunstmuseum" value="0" checked="checked" onClick="animateDiv('kunstmuseum', 'nichts')"> 
<input id="kunst_radio2" type="radio" name="kunstmuseum" value="6794200" onClick="animateDiv('kunstmuseum', 'halb')"> 
<input id="kunst_radio3" type="radio" name="kunstmuseum" value="13588400" onClick="animateDiv('kunstmuseum', 'voll')"> 

이 사업부는 애니메이션하기위한 HTML입니다 : 여기

#kunstmuseum { 
left: 0; 
top: 0; 
height: 80px; 
width: 11.5%; 
background-color:#334D5C; 
white-space: normal; 
display: inline-block; 
border-top: 0; 
} 

이 라디오 버튼에 대한 HTML입니다 JS 코드입니다.

var mapping = { 
    kunstmuseum: { 
    voll: 0, 
    halb: 0.5, 
    nichts: 1 
    } 
}; 
function animateDiv(type, val) { 


    var div = $('#' + type); 
    if(div.data('originalWidth') == undefined) 
    div.data('originalWidth', div.width()); 

    var width = div.data('originalWidth'); 
    width *= mapping[type][val]; 
    $('#' + type).animate({width: width}, 500); 
} 

차 여기 불행히도 작동하지 않는 바이올린입니다 : http://jsfiddle.net/zord/r1zut4we/

는하지만 애니메이션 기능 내 웹 사이트에서 작동 : 나는 당신의 매핑 값을 백분율을 사용하여 표시하는 것입니다 할 수있는 가장 쉬운 방법을 생각 http://labs.tageswoche.ch/budget/budget.html

Answer 1

직접. 이 바이올린을 한번보세요. http://jsfiddle.net/1dx5zfv6/16/

var mapping = { 
kunstmuseum: { 
    voll: 0, 
    halb: 5.5, 
    nichts: 11.5 
    } 
}; 
animateDiv = function(type, val) { 

    var div = $('#' + type); 

    if(div.data('originalWidth') == undefined) 
    div.data('originalWidth', div.width()); 
    var widthPer = mapping[type][val]; 

    $('#' + type).animate({width:widthPer + '%'}, 500); 
}