Tengo un problema, tengo una calculadora de suma en un formulario, todo bien hasta hay, pero busco que el resultado que lo muestra en un input text haga un efecto cada ves que cambie el resultado, por ejemplo fade in o fade out. No se como agregar el efecto, espero me puedan ayudar.
Les Comparto el código que tengo:
Código:
<form id="form1" name="form1" method="post" action="">
<table width="600">
<tr>
<td><p>
<label>
<input type="radio" name="RadioGroup1" value="0.1"id="RadioGroup1_0" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="2"id="RadioGroup1_1" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="3"id="RadioGroup1_2" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="4"id="RadioGroup1_3" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="5"id="RadioGroup1_4" />
Opción</label>
<br />
</p></td>
<td><p>
<label>
<input type="radio" name="RadioGroup2" value="0.2"id="RadioGroup2_0" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="2"id="RadioGroup2_1" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="3"id="RadioGroup2_2" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="4"id="RadioGroup2_3" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="5"id="RadioGroup2_4" />
Opción</label>
<br />
</p></td>
<td><p>
<label>
<input type="radio" name="RadioGroup3" value="0.1" id="RadioGroup3_0" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup3" value="2" id="RadioGroup3_1" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup3" value="3" id="RadioGroup3_2" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup3" value="4" id="RadioGroup3_3" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup3" value="5" id="RadioGroup3_4" />
Opción</label>
<br />
</p></td>
<td>
<select>
<option name="SelectGroup1" value="0">0</option>
<option name="SelectGroup1" value="1.1">1</option>
<option name="SelectGroup1" value="2">2</option>
<option name="SelectGroup1" value="3">3</option>
<option name="SelectGroup1" value="4">4</option>
<option name="SelectGroup1" value="5">5</option>
<option name="SelectGroup1" value="6">6</option>
<option name="SelectGroup1" value="7">7</option>
<option name="SelectGroup1" value="8">8</option>
<option name="SelectGroup1" value="9">9</option>
<option name="SelectGroup1" value="10">10</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><input type="text" name="resultado" id="resultado" disabled="disabled" value="0" /></td>
</tr>
</table>
</form>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(e) {
$('#form1').change(function() {
var obj = {};
var string = '';
var sum = 0;
// Grupo 1
if ($("input:radio[name=RadioGroup1]").is(':checked')) {
var n1 = $("input:radio[name=RadioGroup1]:checked").val();
sum += parseFloat(n1);
}
// Grupo 2
if ($("input:radio[name=RadioGroup2]").is(':checked')) {
var n1 = $("input:radio[name=RadioGroup2]:checked").val();
sum += parseFloat(n1);
}
// Grupo 3
if ($("input:radio[name=RadioGroup3]").is(':checked')) {
var n1 = $("input:radio[name=RadioGroup3]:checked").val();
sum += parseFloat(n1);
}
// Grupo 4
if ($("select option[name=SelectGroup1]").is(':checked')) {
var n1 = $("select option[name=SelectGroup1]:checked").val();
sum += parseFloat(n1);
}
$('#resultado').val(sum);
});
});
</script>
