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

Question

我试图创建一个交互式的“游戏”，像这样：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);
          }
        }