javascript - 在响应式设计中通过单选按钮为多个 div 设置动画

Question

我有几个 div，它们通过单击不同的单选按钮来改变它们的大小。如果单击窗口尺寸较小的单选按钮，div 会缩小。之后，如果您调整窗口大小(使其变大)并单击另一个单选按钮以使 div 再次增长，它不会增长到原始大小的 100%。问题是什么？我已经在 CSS 中使用了百分比:

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

这是单选按钮的 HTML:

<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')">

这是要设置动画的 div 的 HTML:

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

这是 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);
}

不幸的是，这是一个无法使用的 fiddle :http://jsfiddle.net/zord/r1zut4we/

但是动画功能在我的网站上有效:http://labs.tageswoche.ch/budget/budget.html

Answer 1

我认为最简单的方法是在映射值中使用百分比并直接显示它们。看看这个 fiddle 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);
}