我尝试创建一个这样的交互式“游戏”: 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
最佳答案
您需要它来记住原始宽度。也许,在你制作动画之前,检查是否设置了 .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 - 动画功能 : change div width by using radio buttons,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27103399/