Ir para conteúdo
Frederico Veloso

Erro com contador de números animado jQuery de zero a valor

Recommended Posts

Fala pessoal, como posso carregar o contator apenas quando o elemento estiver na tela?
('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});












o posso carregar o contador apenas quando o elemento está na tela

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora


  • Conteúdo Similar

    • Por Melkis
      Estou com um grande problema tenho imagens irregulares preciso recorta-las e salvar em um outro arquivo, até aí tudo bem, o problema é que o sistema que estou criando é totalmente responsivo, e o script abaixo delimita o tamanho da imagem, o script está cortando, salvando aimagem em png, tudo está funcionando perfeitamente, o único problema é ele não se adequar responsivo, quem souber como posso pegar os eixos x e y atuais da tela e coloca-los dentro das variáveis que fazem, pois tentei o .resize mas não deu certo, Aguardo anciosamente a resposta, muito obrigado seguem os links para que possam entender o eu eu estou querendo fazer:
      Para terem uma ideia melhor do que estou falando segue o link de um site com cropper.js em quadros e responsivo: https://fengyuanchen.github.io/cropperjs/
      E aqui o link com exemplo de crop poligonal, https://netplayer.gr/crop/
      //funçao para fazer um crop na imagem $(document).ready(function() { var condition = 1; var points = [];//holds the mousedown points var canvas = document.getElementById('myCanvas'); this.isOldIE = (window.G_vmlCanvasManager); $(function() { // if (document.domain == 'localhost') { if (this.isOldIE) { G_vmlCanvasManager.initElement(myCanvas); } var ctx = canvas.getContext('2d'); var imageObj = new Image(); function init() { canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseup', mouseUp, false); canvas.addEventListener('mousemove', mouseMove, false); } // Draw image onto the canvas imageObj.onload = function() { ctx.drawImage(imageObj, 0, 0); }; imageObj.src = "img.png"; // Switch the blending mode ctx.globalCompositeOperation = 'destination-over'; //mousemove event $('#myCanvas').mousedown(function(e) { if (condition == 1) { ctx.beginPath(); $('#posx').html(e.offsetX); $('#posy').html(e.offsetY); } }); //mousedown event $('#myCanvas').mousemove(function(e) { if (condition == 1) { if (e.which == 1) { var pointer = $('<span class="spot">').css({ 'position': 'absolute', 'background-color': '#000000', 'width': '5px', 'height': '5px', 'top': e.pageY, 'left': e.pageX }); //store the points on mousedown points.push(e.pageX, e.pageY); //console.log(points); ctx.globalCompositeOperation = 'destination-out'; var oldposx = $('#oldposx').html(); var oldposy = $('#oldposy').html(); var posx = $('#posx').html(); var posy = $('#posy').html(); ctx.beginPath(); ctx.moveTo(oldposx, oldposy); if (oldposx != '') { ctx.lineTo(posx, posy); ctx.stroke(); } $('#oldposx').html(e.offsetX); $('#oldposy').html(e.offsetY); } $(document.body).append(pointer); $('#posx').html(e.offsetX); $('#posy').html(e.offsetY); }//condition }); $('#crop').click(function() { condition = 0; // var pattern = ctx.createPattern(imageObj, "repeat"); //ctx.fillStyle = pattern; $('.spot').each(function() { $(this).remove(); }) //clear canvas //var context = canvas.getContext("2d"); //Delimita o tamanho da imagem isso já retira a base responsiva da imagem ctx.clearRect(0, 0, 600, 600); ctx.beginPath(); ctx.width = 350; ctx.height = 350; ctx.globalCompositeOperation = 'destination-over'; //draw the polygon setTimeout(function() { //console.log(points); var offset = $('#myCanvas').offset(); //console.log(offset.left,offset.top); for (var i = 0; i < points.length; i += 2) { var x = parseInt(jQuery.trim(points[i])); var y = parseInt(jQuery.trim(points[i + 1])); if (i == 0) { ctx.moveTo(x - offset.left, y - offset.top); } else { ctx.lineTo(x - offset.left, y - offset.top); } //console.log(points[i],points[i+1]) } if (this.isOldIE) { ctx.fillStyle = ''; ctx.fill(); var fill = $('fill', myCanvas).get(0); fill.color = ''; fill.src = element.src; fill.type = 'tile'; fill.alignShape = false; } else { var pattern = ctx.createPattern(imageObj, "repeat"); ctx.fillStyle = pattern; ctx.fill(); var dataurl = canvas.toDataURL("image/png"); //upload to server (if needed) var xhr = new XMLHttpRequest(); // // xhr.open('POST', 'upload.php', false); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var files = dataurl; var data = new FormData(); var myprod = $("#pid").val(); data = 'image=' + files; xhr.send(data); if (xhr.status === 200) { console.log(xhr.responseText); $('#myimg').html('<img src="upload/' + xhr.responseText + '.png"/>'); } } }, 20); }); // } }); }); Para interessados em testar é só adicionar as tags: <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>   e colocar um <canvas> no <body> da pagina:   <canvas id="myCanvas"></canvas>   Desde já Muito Obrigado a todos   javascript canvas jcrop  
    • Por Conrado Mirto
      Estou Com Problema em Ler o Corpo do Modal, o Erro esta marcado com alert("ERRO AQUI"); PRINT DO ERRO
       
       
      insaneservers.js
      $(document).ready(function () { $("#formVIPBRONZE").click(function() { $("#formVIP_Bronze").modal("show"); // $.ajax({ url:"boxBronze_inicio.php",dataType:"json", method:"GET", data: {}, success: function(data) { if(data.hasError == false) { $("#abrir_box_bronze").html(data.corpo_inicio); $("#proxima_ir_cadastro_bronze").click(function() { $.ajax({ url:"boxBronze_cadastro.php",dataType:"json", method:"GET", data: {}, success: function(datac) { if(data.hasError == false) { $("#abrir_box_bronze").html(datac.cadbronze); $("#TitleBronze").html("Cadastro VIP [2/2]"); } else{ alert("ERRO!\n"+data.msgErro); } }, error: function(){ alert("ERRO 1"); } }); }); } else{ alert("ERRO!\n"+data.msgErro); } }, error: function(){ alert("ERRO AQUI"); } }); }); }); boxBronze_inicio.php
      <?php require "insane.php"; $insane = new insane(); $html = ' <div id="infoBronze"> <center><b>Termos do Servidor </b><br></center> Vantagens Extras <br> <small>* Eventos Exclusivos Para Vip </small><br> <small>* Suporte Exclusivo </small><br> <small>* Sala no TS³</small><br><br> Informacoes <br> <small>* Reembolso de VIP Somente Quando Servidor Fechar/Falir. </small><br> <small>* VIP Podem Ser Pausado Apenas 1 Vez </small><br> <small>* Maximo 2 Vip Por Conta </small><br> <small>* VIP Valera por 31 Dias </small><br> <small>* Nao Vendemos Kits Diferentes dos Abaixo </small><br><br> Apos Wipe <br> <small>* Kits VIP"s Serao Liberado as 00:00 </small> <br><br> Ativar Vip <br> <small>* Contate um Admistrador no TS3 ts3.globalservidores.com.br </small><br> <small>* Procurar por Mirtin ou Peixoto no Servidor </small><br> <small>* Envie Um Email Com Todos as Informacoes <a href="#">ATIVAR VIP</a> </small><br> <hr> <input type="button" value="Proximo" class="btn btn-primary btn-block" id="proxima_ir_cadastro_bronze"> </div> '; $insane->setSaida("corpo_inicio", $html); $insane->fim(); ?>  
      boxBronze_cadastro.php <?php session_start(); require "insane.php"; // VOCÊ IRA PUCHAR O ARQUIVO INSANE.PHP AQUI move os box para pasta boxs $insane = new insane(); // action="processa/processa_cadcompvip.php" $cadbronze = ' <div class="alert alert-success"> <b>Atenção</b> <Br>Você Esta Cadastrando Sua Conta Para a ,Como: Comandos, Eventos, Dicas, Suporte Mais Rapido e Etc </div> <form method="post" action="processa/processa_cadcompvip.php" enctype="multipart/form-data"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label>Nick:</label> <input name="vip_nick" type="text" class="form-control input-sm" placeholder="Digite seu Nick" required> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label>Email:</label> <input name="vip_email" type="email" class="form-control input-sm" placeholder="Digite seu Email" required> </div> </div> </div> <div class="form-group"> <label>Senha:</label> <input type="password" class="form-control" name="vip_senha" placeholder="Sua Senha Para Acessa o (Painel VIP)" required> </div> <div class="form-group"> <label>Sua Steam</label> <input type="text" class="form-control" name="vip_steam" placeholder="Sua Steam Para Nao Houver nenhum Problema" required> </div><hr> <input type="submit" value="Concluir e Pagar" class="btn btn-success btn-block"> </form>'; $insane->setSaida("boxBronze_cadastro", $cadbronze); // PRIMEIRAMENTE DEFINIMOS A SAIDA EM JSON, LOGO APOS TEMOS O NOME QUE IRA SAIR PARA QUE você REQUISITE NO AJAX, E LOGO DPS REPASSAMOS O ARQUIVO QUE IRA APARECER. $insane->fim(); ?>  
    • Por rafab
      Olá. Realizei o download do node.js, porém, quando vou acessar a versão através node - v ou node --version, aparece a mensagem node is not defined. 
      Todos os comandos que escrevo, como por exemplo o clear, aparece o erro clear is not defined. Gostaria de saber como posso resolver esse problema. 
    • Por Jesse&Francinete
      Olá pessoal, tô com um probleminha no meu código, eu tenho uma array com pelo menos 300 keys, peguei esse exemplo: https://www.w3schools.com/js/js_ajax_php.asp
       
      Ele funciona, mas se eu digito: "a" aparece vários registros, meu querer é o seguinte: Se eu digitar: "jesse.pereira" > echo "Usuário válido". Se eu digitar "jesse.pereir" > echo "Usuário inválido".
    • Por luansilva71
      Estou usando javascript para validar alguns campos do formulário como telefone e CPF. O script funciona corretamente da forma que eu quero, o problema é que quando o usuário não digita todos os números da maskara o script não limpa o input, ele aceita aquela quantidade de números.
       
      Façam o teste https://codepen.io/KingRider/pen/qNxror
       
      Eu queria uma ajuda pra fazer com que se o usuário não digitasse a quantidade correta de números, quando ele tirasse o foco o input apagasse os números digitados.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: