Executar animaçao com circulos via jquery ?

[Micilini Roll 49]

Olá pessoal eu tenho essa pagina aqui embaixo:

 

http://www.fazerbem.com.br/in_b_funcoes/circulos/

 

Ela pega a combinacao que voce clicou e depois assim que o link é clicado a combinacao é mostrada na tela! exemplo:

 

 

 

clicou em :

• botão 1
• botão 5
• botão 6

 

é armazenado na variavel cirulos os seguintes caracteres:

 

 

156

 

dai quando voce clica em "ver combinacoes" o javascript pega esta variavel e mostra na tela,so que eu queria fazer uma animaçaozinha em vez de mostrar na tela,que no caso seria:

 

1-em ordem de combinacao as divs 1,5 e 6 iriam mudar de background,e iriam permanecer com esse novo background nun intervalo de tempo de 1,5 segundos,exemplo pratico:

 

 

div 1 -> mudar de background (1,5s) -> tempo finalizado -> div 1 volta para cor normal

div 2 -> mudar de background (1,5s) -> tempo finalizado -> div 2 volta para cor normal

div 3 -> mudar de background (1,5s) -> tempo finalizado -> div 3 volta para cor normal

 

ok pessoal alguma ideia! eu so necessito saber o codigo que poderia fazer isso ao meu ver é so:

 

1-separar cada caracter da variavel circulos

2-fazer o jquery selecionar cada caracter de acordo com o id da div mudar de cor e ir fazendo loop ate concluir todos os caracteres

 

(voce podem ver o codigo no console javascript do google chrome abracos!)

 

 

[Zack_z001 9]

É Fácil,só usar no atributo style border-radius, qualquer dúvida só perguntar!

[Micilini Roll 49]

rsrs olha nao é nada disso que voce falou! acho que vc entendeu errado rsrs to tentando resolver aqui e cheguei a seguinte conclusão:

 

1-Pegar o conteudo da variavel circulos e contar os caracteres (com .lenght)

2-Fazer um loop com for da seguinte forma:

 

 

Para x é igual a 0, e x é menor ao numero de caractes da variavel circulos, x acrescenta + 1

 

2-Dentro do loop eu faco um split da variavel circulo

5-mudo o background da div durante 1,5 segundos aonde esta div é igual ao [0] spit da variavel circulo

 

6-vou tentar pra ver no que vai dar!

[romerito 11]

i aew cara, tenta algo com canvas do HTML5, ficaria mais ou menos assim:

<div id="circulos" style="height:auto; width:150px;">

		<div class="circulo" id="1"><div class="numeros">1</div></div>
		<div class="circulo" id="2"><div class="numeros">2</div></div>
		<div class="circulo" id="3"><div class="numeros">3</div></div>
		<div class="circulo" id="4"><div class="numeros">4</div></div>
		<div class="circulo" id="5"><div class="numeros">5</div></div>
		<div class="circulo" id="6"><div class="numeros">6</div></div>
		<div class="circulo" id="7"><div class="numeros">7</div></div>
		<div class="circulo" id="8"><div class="numeros">8</div></div>
		<div class="circulo" id="9"><div class="numeros">9</div></div>

	</div>
	<br><br><br><a onclick="combinacao()" style="cursor:pointer; margin-left:50px; text-decoration:underline; color:#0000FF">Ver Combinação</a>
	<div id='combinacao' style='clear:both;'>Resultado</p></div>

 

JS

function combinacao(){
		$('#combinacao').html('');
		var createCanvas = function(id){
			return $('<canvas />')
				.attr('id',id)
				.attr('width',40)
				.attr('height',40);
		}
		
		var draw = {
			
			init : function(canvas,texto){
				
				var drawCircle = function(){
					ctx.arc(40/2,40/2,18,0,Math.PI*2,false);
					ctx.fillStyle = '#fa0c01';
					ctx.lineWidth = 1;
					ctx.fill();
					ctx.strokeStyle = '#fa0c01';
				}
			
				var drawText = function(){
					ctx.textAlign = 'center';
					ctx.fillStyle = '#ffffff';
					ctx.font = '18px Times New Roman';
					ctx.fillText(texto, 40/2, 40/2);
				}
				
				var ctx = canvas.get(0).getContext('2d');
				ctx.beginPath();
				drawCircle();
				drawText();
				ctx.stroke();
			}
		}
		
		$(circulos).each(function(i,obj){
			var canvas = createCanvas('canvas'+i);
			var span = $('<span />').css('display','none').append(canvas);
			$('#combinacao').append(span);
			draw.init(canvas, obj);
			setTimeout(function(){
				$(span).fadeIn('slow');
			}, i * 600);
		});
		circulos = new Array();
	}

 

o que eu não coloquei continua igual o que você já havia feito, espero que ajude abraço!

[cristianoolv 93]

<!DOCTYPE html>
<html>
<head>
	<title>Teste</title>
  <script>
  window.onload = function(){

  var el = function(id){ return document.getElementById(id); }
  var e =   el("m").getElementsByTagName("div");
  var t = []; 

  for(var x in e){
    e[x].onclick = function(){
      t.push(this.id);
    }
  }

  el("mt").onclick = function(){
  
  var p = setInterval(function(){
   try{
    var id = t.shift();
     el(id).style.webkitAnimation = "pisca 1.5s";
      setTimeout(function(){
        el(id).removeAttribute("style");
      },1400);
     }catch(e) {
       clearInterval(p);
     }
    },1500);
  
  }
}
 </script>
  <style>

  div#b{
    background: #858585;
    width: 150px;
    padding: 3px 5px;
    text-align: center;
  }
  
  a#mt{
    text-decoration: none;
    color: #fff;
  }

  a#mt:hover {
    color: #000;
  }

  div#m{
    width: 148px;
    height: auto;
    border: 1px solid #858585;
    padding: 5px;
  }

  div#m div{
    background: #1C85A8;
    display: inline-block;
    padding: 10px 16px;
    border-radius:50%;
    cursor:pointer;
    color: #fff;
    margin: 4px 3px;
  }

  div#m div:active{
     background: #573C02;
  }

  @-webkit-keyframes pisca {
    50% { background: #573C02; }
  }

</style>
</head>
<body>
  <div id="m">
    <div id="1">1</div>
    <div id="2">2</div>
    <div id="3">3</div>
    <div id="4">4</div>
    <div id="5">5</div>
    <div id="6">6</div>
    <div id="7">7</div>
    <div id="8">8</div>
    <div id="9">9</div>
  </div>
  <div id="b">
    <a href="#" id="mt">Mostrar</a>
  </div>
</body>
</html>

Dei até uma estilizada na parada, hehe...

[Micilini Roll 49]

+1 ai pra todos voces! que me ajudaram muiiito obrigado testei o codigo de todos daqui: felizmente ambos os codigos deram certo! mas terei que marcar 1 como resolvido!

[Micilini Roll 49]

Desculpe mas o topico ainda nao esta resolvido o seu codigo apresenta somente 1 problema!! a variavel T se perde no meio do caminho e quando vou clicar novamente no link nada aconteçe! exemplo:

 

1-eu marquei 2,4,5,8 dai apertei o botão mostrar!

2-ele faz a animação

3-quando a animação termina e se eu clicar novamente em mostrar ele nao me mostra nada!

 

 

como resolver isso??

[Micilini Roll 49]

Consegui resolver esse meu projeto pessoal com algo simples e de facil entendimento e que mais tarde pode ser aprimorado por pessoas que tenham a mesma duvida! abaixo se encontra o codigo completo:

 

<!DOCTYPE html>
<html  lang="pt-br">
<meta charset="UTF-8">
<head>
	<title>Teste</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
 window.onload = function(){
var combinacao = "";
		
 $('#reset').click(function(){
	combinacao = "";
});

       $('.circulos').mousedown(function() {
       combinacao = combinacao + $(this).attr('id');
	   $(this).css('background','#fa0c01');
       }).on('mouseup mouseleave', function() {
	   $(this).css('background','#0080ff');
       });
		
		$('#sex').click(function(){
		if(combinacao == ""){
		
		var voltas = 0;
		
		var b = setInterval(function(){
		if(voltas == 3){
		clearInterval(b);
	$('.circulos:active',0).css('background', '#fa0c01');
		}else{
		$('.circulos').css('background','#fa0c01');
		voltas++;
		
		setTimeout(function(){$('.circulos').css('background','#0080ff');
	

		},250);
		}
		},500);
		
		
		}else{
        var contar = combinacao.length;
        var i = 0;
		
		 var t = setInterval(function(){
		
		if(i == contar){
		clearInterval(t);
        $('.circulos:active',0).css('background', '#fa0c01');
		}else{
		var n = combinacao.substr(i,contar - contar + 1);
		
		$('#' + n).css('background','#fa0c01');
		i++;
		setTimeout(function(){$('.circulos').css('background','#0080ff');
		

		
		},500);
		}
 

		},1200);
		
		}
		
		
		});
		
		
		
 
  }
</script>
  <style>
  .circulos{
background: #0080ff;
color:#fff;
width:40px;
height:40px;
vertical-align:middle;
text-align:center;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%; 
margin:5px; 
float:left;
cursor:pointer;
font-size:18px;
text-align:center;
  }

  
  @-webkit-keyframes pisca {
    50% {  background:#fa0c01; }
  }

</style>
</head>
<body>
  <div id="m" style="height:auto; width:150px;">
    <div class="circulos" id="1"></div>
    <div class="circulos" id="2"></div>
    <div class="circulos" id="3"></div>
    <div class="circulos" id="4"></div>
    <div class="circulos" id="5"></div>
    <div class="circulos" id="6"></div>
    <div class="circulos" id="7"></div>
    <div class="circulos" id="8"></div>
    <div class="circulos" id="9"></div>
  </div>
  
  <a id="sex" style="cursor:pointer; color:#0000ff; text-decoration:underline;">Mostrar Combinação</a><br>
   <a id="save" style="cursor:pointer; color:#0000ff; text-decoration:underline;">Salvar Combinação</a><br>
    <a id="reset" style="cursor:pointer; color:#0000ff; text-decoration:underline;">Resetar Combinação</a><br>
  
</body>
</html>

 

 

:lock: Topico Resolvido!!