javascript - 动画功能 : change div width by using radio buttons

Question

我尝试创建一个这样的交互式“游戏”: http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html?_r=0

我有一个粗略的草稿，它与复选框一起工作得很好，现在我想要与单选按钮相同的行为。

但是如果我点击一个单选按钮，div 就会缩小，如果我点击另一个单选按钮，它会一次又一次地缩小。行为应该是:单击一个单选按钮(缩小 10%)，然后单击单选按钮(缩小 5%)它应该会变大一点。因此，它应该始终考虑用户之前点击的内容。

到目前为止，这是 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

您可以在此处看到复选框的功能:http://labs.tageswoche.ch/budget

Answer 1

您需要它来记住原始宽度。也许，在你制作动画之前，检查是否设置了 .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);
}