script per far funzionare l'animazione

dev · 12 Mag 2016

Buongiorno,
ringrazio da subito se c’è qualcuno che può darmi un aiuto per integrare i bottoni alla animazione.
Ai seguenti link ci sono le pagine di prova per vedere e modificare il codice:
http://www.eventclub.it/animated-number/prova2.html — animazione che parte alla apertura di pagina http://www.eventclub.it/animated-number/prova3.html — animazione in stand by
L’obbiettivo è far funzionare i bottoni START e STOP soprattutto coi cellulari
Ho provato ad aggiungere il seguente script guardando qualche video, ma non mi funziona

Codice:

<script type=”text/javascript”>
    $(‘document’).ready(function(){
    $(‘#start’).bind(‘click’ , start);
    function start(){
    $ (‘count’).start();
    }
    });
    </script>

dev · 13 Mag 2016

Sono riuscito a far funzionare il bottone START
Mi manca di far funzionare il bottone STOP
Se qualcuno può aiutarmi
Grazie

Questo il link: http://www.eventclub.it/animated-number/prova4.html

Questo il codice:

HTML:

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title></title>
    
    <style>
    #css
{
  width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
  float:left;
  margin:5px;
}
.count
{
  line-height: 200px;
  color:white;
  margin-left:10px;
  font-size:150px;
  float:center;
}
#sfondoCounter {
   width: 400px;
   height: 200px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
  float:center;
  margin:20px;
}
    
    </style> 
  
  </head>

  <body>

<div align="center">
<div  id="sfondoCounter">
  <div id="count"><span  class="count">9999</span></div>
</div>
<br>
<input type="button" id="avvio" value="START" />
<input type="button" id="stop" value="STOP" />
</div>


    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
     
      <script> 
	  
	  $("#avvio").click(function(){
		  
  $('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 45000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

});
 
  </script>

  </body>
</html>

criric · 13 Mag 2016

Ciao, devi separare le due funzioni, piu o meno cosi

Codice:

            $("#avvio").click(function () {
                avvio();
            });

            $("#stop").click(function () {
                stop();
            });

            function avvio() {
                $('.count').each(function () {
                    $(this).prop('Counter', 0).animate({
                        Counter: $(this).text()
                    }, {
                        duration: 45000,
                        easing: 'swing',
                        step: function (now) {                            
                            $(this).text(Math.ceil(now));
                        }
                    });
                });
            }

            function stop() {
                $('.count').each(function () {
                    $(this).stop();
                });

            }

nella funzione stop metterai quello che ti serve per fermare il count

dev · 13 Mag 2016

Grazie criric
favoloso, stupendo, funzionaaaa

dev · 14 Mag 2016

Gentile criric

ti rimando a questa pagina http://www.eventclub.it/animated-number/prova7.html dove ho inserito lo script.
Funziona benissimo.
Dovrei fare che il risultato ottenuto allo STOP venisse scritto-trasferito da qualche parte della pagina per poi essere inviato. Che alternative ci sarebbero?

Cerca

Cerca

script per far funzionare l'animazione

dev

Nuovo Utente

dev

Nuovo Utente

criric

Super Moderatore

dev

Nuovo Utente

dev

Nuovo Utente

Discussioni simili