0

Aqui está o codigo:

 
jQuery(function($) {
    $('a.panel').click(function() {
		console.log($($(this).attr('href')));
        var $target = $($(this).attr('href')); 		
            $target.show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);       
    });
});
#right {
    position: relative;
    float: left;
    margin: 0 5px 0 0;
    border: 1px solid black;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

div.panel {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#target1" class="panel">Target 1</a><br/>

<div id="right">
    <div class="panel" id="target1" style="background:blue">
        <script>
            var tmp = new Array("1","2","3","4");
			var myvar;
			var i = 0;
							
			var timer = setInterval(function() {
				if(tmp.length) {
					var p= tmp.shift();
					console.log(p);
					document.getElementById("right").innerHTML = p;
				} else {
					clearInterval(timer);
				}
			}, 5000);		 		 
		</script>
    </div>   
</div>

O meu objectivo é sempre que aparece uma numero o fundo mude de cor... Até agora só encontrei funções que o fazem separado. Já tentei mudar o click mas sem resultado.

3
  • Pode utilizar jQuery? Commented 24/04/2015 às 10:54
  • @Ana, considere colocar o código na questão e não dar um link com o mesmo Commented 24/04/2015 às 11:02
  • @FelipeAvelar O código dela já usa jQuery.
    – bfavaretto
    Commented 24/04/2015 às 11:23

2 Respostas 2

1

Penso que seja isto que você procura:

var tmp = new Array("1","2","3","4");
var color = new Array("red", "green", "blue", "yellow");
var myvar;
var i = 0;
							
setInterval(function() {
    $( "#right" ).text(tmp.shift());
    $( "#right" ).css("background-color", color.shift());
}, 5000);
#right {
    position: relative;
    float: left;
    margin: 0 5px 0 0;
    border: 1px solid black;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

div.panel {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="right">
</div>

2
  • é mesmo isso, obrigada!
    – Ana
    Commented 24/04/2015 às 11:03
  • existe maneira de preservar o efeito de deslizamento para a esquerda sempre que muda de cor? .css({ left: -($target.width()) }).animate({ left: 0 }, 500);
    – Ana
    Commented 24/04/2015 às 11:21
1

Aproveitando o exemplo dado, deve ser isto que pretende.

<a href="#target1" class="panel">Target 1</a><br/>

<div id="right">
    <div class="panel" id="target1" style="background:blue">
        <script>
            var tmp = new Array("1","2","3","4");
            var clr = new Array("red","blue","green","yellow");
            var myvar;
            var i = 0;

            var timer = setInterval(function() {
                if(tmp.length) {
                    var p= tmp.shift();
            var c = clr.shift();
                    console.log(p);
                    document.getElementById("right").innerHTML = p;
document.getElementById("right").style.backgroundColor =  c;
                } else {
                    clearInterval(timer);
                }
            }, 500);                 
        </script>
    </div>   
</div>
1
  • existe maneira de preservar o efeito de deslizamento para a esquerda sempre que muda de cor? .css({ left: -($target.width()) }).animate({ left: 0 }, 500);
    – Ana
    Commented 24/04/2015 às 11:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .