Question

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

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

但是，如果我点击一个单选按钮，那么div会缩小，如果我点击另一个，它会一次又一次缩小。行为应该是：单击一个单选按钮（缩小10％），然后单击radion按钮（缩小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);
}

Answer 2

你可以试试这个：

在javascript中保留一个全局变量，比如var globalWidth = $('#cont').width();

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

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

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

2 个答案: