Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/02/2014, 11:17
alfre04
 
Fecha de Ingreso: octubre-2011
Mensajes: 11
Antigüedad: 13 años, 2 meses
Puntos: 0
Resultado de suma con efecto Jquery

Hola a todos, espero me puedan ayudar.

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>