IT-TechCZ s.r.o. | Cloud, VoIP ústředny, vývoj webů a informačních systémů, elektronických systémů, IT poradenství
Zobrazují se odpovědi 1 až 3 z 3

Animace výsledku z checkboxů

  1. Ahoj lidi,

    nevěděl byste někdo prosím jak zapsat animaci resultu ze zaškrtlých checkboxů... sčítají se pomocí tohoto:

    Kód:
    sum += parseFloat($(this).attr("rel")) || 0;
    A le tohle mi nevezme animation.....

    dám se celý kod...

    Kód:
     
      function recalculate(){
      /*  var sum = 0;
        $("input[id*='kalkulacka-pole']:checked").each(function(){
        sum += parseFloat($(this).attr("rel")) || 0;
        
        
        }); */    
        
     /*   var sum2 = sum.toLocaleString()
        
        $(".vysledek-kalkulacky").text(sum2);
        $(".result-kalkulacky").val(sum2);     */
        
        var countTo = 0;
        $("input[id*='kalkulacka-pole']:checked").each(function() {
      var $this = $("input[id*='kalkulacka-pole']:checked");
          countTo = $this.attr('rel');
           
                      
      $({ countNum: $this.text()}).animate({
        countNum: countTo
      
      
      
      },
    
      {
    
        duration: 1000,
        easing:'linear',
        step: function() {
          $(".vysledek-kalkulacky").text(Math.floor(this.countNum));
        },
        complete: function() {
          $(".vysledek-kalkulacky").text(this.countNum);
          //alert('finished');
        }
    
      });  
      
      });
    
    
        
        
        
        
        
        };
        
       $("input[id*='kalkulacka-pole']").on("input", function(){
      recalculate();
      
      
      
    });

    Ten zakomentovaný kod funguje skvěle, akorát nevím jak ho mám dostat do animace... potřebuji součet těch checkboxů animovat a né jenom po zaškrtnutí jednoho checkboxu animovat jednu částku...

    ---------- Příspěvek doplněn 22.03.2019 v 12:46 ----------

    Zkouším to dále..takto mi to spočítá vždy první hodnotu a sčítá pak jenom tu první hodnotu po zakliknutí na jiný checkbox s jinou hodnotou....


    Kód:
        var countTo = 0;
        $("input[id*='kalkulacka-pole']:checked").each(function() {
      var $this = $("input[id*='kalkulacka-pole']:checked");
          countTo += parseFloat($this.attr('rel')) || 0 ;
           
                      
      $({ countNum: $(".vysledek-kalkulacky").text(countTo)}).animate({
        countNum: countTo
      
      
      
      },
    
      {
    
        duration: 1000,
        easing:'linear',
        step: function() {
          $(".vysledek-kalkulacky").text(Math.floor(this.countNum));
        },
        complete: function() {
          $(".vysledek-kalkulacky").text(this.countNum);
          //alert('finished');
        }
    
      });  
      
      });
    
    
        
        
        
        
        
        };
        
       $("input[id*='kalkulacka-pole']").on("input", function(){
      recalculate();
      
      
      
    });
    Naposledy upravil PetrGargulák : 22.03.2019 v 12:20

  2. Co se právě děje na Webtrhu?
  3. Vytvořte živou ukázku na JSFiddle nebo na podobném serveru.

  4. Už jsem to asi vyřešil...

    Tímhle kodem: Jen ty čísla mi nezůstávají celé.... a zaokrouhluje se to....

    Kód:
                             
      
         $("input[id*='kalkulacka-pole']").change(function () {
         var total_span = 0;
         $("input[id*='kalkulacka-pole']:checked").each(function () {
             total_span += parseFloat($(this).attr("rel")) || 0;
         });
         $({counter: +$('.vysledek-kalkulacky').text()}).animate({counter: total_span},{
             duration: 500,
             step: function () {
                 $('.vysledek-kalkulacky').text(Math.floor(this.counter));
             }
         });
     });

    Tady je zdroj:

    javascript - Counter animation to a calculated value - Stack Overflow

    ---------- Příspěvek doplněn 22.03.2019 v 13:56 ----------

    Tady se můžete podívat co to teď dělá, čím se toho zbavím ?

    Online kalkulace | TvorbaWebuPraha.cz

    ---------- Příspěvek doplněn 22.03.2019 v 14:36 ----------

    html:

    Kód:
    						<form action="?prilezitostForm=1" method="post" id="prilezitostForm">
    						
    								
    							
    							<div class="form-group">
    								<label class="heading heading--small">Webové stránky </label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="19000" name="novyweb"{if $post['novyweb']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Tvorba nového webu</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="17000"  name="redesign"{if $post['redesign']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Redesign již fungujícího webu </span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="3000" name="mobiltablet"{if $post['mobiltablet']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Verze pro mobil a tablet</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="1500" name="redakcni"{if $post['redakcni']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Redakční systém pro správu webu</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="3000" name="plneniwebu"{if $post['plneniwebu']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Tvorba textů, plnění webu</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox"  id="kalkulacka-pole" class="custom-control-input" rel="1500" name="socialnisite"{if $post['socialnisite']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Sociální sítě</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole"  class="custom-control-input" rel="4000"  name="optimalizace"{if $post['optimalizace']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Optimalizace pro vyhledávače</span>
    								</label>
                   </div> 
                    
                    
                    	<div class="form-group">
    								<label class="heading heading--small">
    									Eshopy
    								</label>
                    
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="29000" name="novyeshop"{if $post['novyeshop']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Tvorba nového eshopu</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="24000" name="redesigneshop"{if $post['redesigneshop']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Redesign již fungujícího webu</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="7000" name="mobileshop"{if $post['mobileshop']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Verze pro mobil a tablet</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="3000" name="redakcnieshop"{if $post['redakcnieshop']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Redakční systém pro správu eshopu</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="4000" name="plnenieshop"{if $post['plnenieshop']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Tvorba textů, plnění eshopu</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="1500" name="socialnieshop"{if $post['socialnieshop']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Sociální sítě</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="8000" name="optimalizaceeshop"{if $post['optimalizaceeshop']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Optimalizace pro vyhledávače</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="5000" name="napojenidodavatele"{if $post['napojenidodavatele']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Napojení na dodavatele</span>
    								</label>
                    </div>
                    
                    
                    
                    <div class="form-group">
    								<label class="heading heading--small">
    									Logo, identita a tiskoviny
    								</label>
                    
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="2000" name="tvorbaloga"{if $post['tvorbaloga']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Tvorba loga</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="2500" name="identita"{if $post['identita']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Firemní identita</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="500" name="vizitky"{if $post['vizitky']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Vizitky</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="2000" name="letaky"{if $post['letaky']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Letáky, plakáty</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="4000" name="brozury"{if $post['brozury']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Brožury, katalogy</span>
    								</label>
    								<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="2500" name="polepy"{if $post['polepy']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Polepy vozů</span>
    								</label>
                    	<label class="custom-control custom-checkbox">
    									<input type="checkbox" id="kalkulacka-pole" class="custom-control-input" rel="1500" name="billboardy"{if $post['billboardy']!=''} checked{/if}>
    									<span class="custom-control-indicator"></span>
    									<span class="custom-control-description">Billboardy</span>
    								</label>
    							</div>
    							
                   <div class="form-group">
                   <div class="row">
                   <div class="col-12 col-lg-7">
                   <label class="heading heading--small d-inline-block float-left">Orientační cena:</label>
                   <div class="vysledek-kalkulacky d-inline-block float-left counter">0</div> <span class="cenakc d-inline-block float-left">Kč</span>
                   <input type="hidden" class="result-kalkulacky" name="kalkulacka-vysledek" />
                   </div>

    A jquery

    Kód:
      function recalculate(){
         $("input[id*='kalkulacka-pole']").change(function () {
         var total_span = 0;
         $("input[id*='kalkulacka-pole']:checked").each(function () {
             total_span += parseFloat($(this).attr("rel")) || 0;
         });
         $({counter: $('.vysledek-kalkulacky').text()}).animate({counter: total_span},{
             duration: 500,
             step: function () {                
                 $('.vysledek-kalkulacky').text(Math.round(this.counter).toLocaleString());
             }
         });
     });
        
        
        
        
        };
        
       $("input[id*='kalkulacka-pole']").on("input", function(){
      recalculate();
      
      
      
    });


    ---------- Příspěvek doplněn 22.03.2019 v 17:58 ----------

    vyřešil jsem to tímto:

    Kód:
        
      function recalculate(){
         $("input[id*='kalkulacka-pole']").change(function () {
         var total_span = 0;
         var sum = 0;
         var sum2 = 0; 
         $("input[id*='kalkulacka-pole']:checked").each(function () {
             total_span += parseFloat($(this).attr("rel")) || 0;
             
             
         });
           
           sum = total_span;
           sum2 = total_span.toLocaleString() ;
          $(".result-kalkulacky").val(sum2); 
            console.log(sum);
         $({counter: +$('.vysledek-kalkulacky').text()}).animate({counter: sum},{
             duration: 500,
             step: function (now) {                           
                 $('.vysledek-kalkulacky').text(Math.ceil(now));
                   
                 
             }
         });
     });
        
        
        
        
        };  
     
       $("input[id*='kalkulacka-pole']").on("input", function(){
      recalculate();
      
      
      
    });

Hostujeme u Server powered by TELE3