Javascript 动画功能：使用单选按钮更改div宽度

我尝试创建一个交互式“游戏”，如下所示：

我有一个粗略的草案，它是很好地工作与复选框，现在我想与单选按钮相同的行为

但是如果我单击一个单选按钮，div就会收缩，如果我单击另一个按钮，它会一次又一次地收缩。行为应该是：单击一个单选按钮（收缩10%），然后单击radio按钮（收缩5%），它应该增长一点。所以它应该总是考虑以前点击过的东西。< /P> 以下是迄今为止的JavaScript函数：

function animateDiv(val) {
      if (val=="voll") {
       $('#cont').animate({width: '-=10%'}, 500);
      }
      else if (val=="halb") {
        $('#cont').animate({width: '-=5%'}, 500);
      }
      else if (val=="null") {
        $('#cont').animate({width: '-=0%'}, 500);
      }
}

标记：

<input id="radio" type="radio" name="kultur" onClick="animateDiv('voll')">Voll
<input id="radio" type="radio" name="kultur" onClick="animateDiv('halb')">Halb
<input id="radio" type="radio" name="kultur" checked="checked" onClick="animateDiv('null')">Null

Voll
哈尔布
无效的

---

您可以在此处看到复选框的功能：

您需要它来记住原始宽度。也许，在设置动画之前，请检查是否已设置.data（'originalWidth'）。如果没有，请将其设置为宽度。然后，在以后的每个动画中，将其作为基础。类似于

function animateDiv(val) {
    var div = $('#cont');
    if(div.data('originalWidth') == undefined)
        div.data('originalWidth', div.width());

    var width = div.data('originalWidth');

    if (val=="voll")
        width *= .9;
    else if (val=="halb") 
        width *= .95;

    $('#cont').animate({width: width}, 500);
}

你能试试这个吗

在javascript中保留一个全局变量，比如

var globalWidth=$（'#cont'）.width（）

然后将
animateDiv
函数更改为以下内容：（想法是将宽度恢复为原始宽度，然后设置动画）

同时发布您的标记或提供fiddle。虽然这是一个不错的解决方案，但可以将变量存储在元素本身中，类似于我的解决方案。这样，您就可以对多个元素重复使用相同的代码，而不必为每个有效的项使用一个全局变量，但它看起来不是很好，因为动画会跳到边缘，然后再次收缩。太好了！谢谢
       function animateDiv(val) {

          $('#cont').css('width',globalWidth);

          if (val=="voll") {
           $('#cont').animate({width: '-=10%'}, 500);
          }
          else if (val=="halb") {
            $('#cont').animate({width: '-=5%'}, 500);
          }
          else if (val=="null") {
            $('#cont').animate({width: '-=0%'}, 500);
          }
        }