Change the color of a div with a setInterval

Question

Change the color of a div with a setInterval

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Here is the code:

 
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><ahref="#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>

My goal is whenever a number appears the background changes color ... So far I have only found functions that separate it. I already tried to change click but with no result.

javascript html css

asked by anonymous 24.04.2015 / 12:50

2 answers

Difficulty with triangular number program [duplicate] Erase specific line of a text file

score 1 · Answer 1

I think this is what you are looking for:

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><divid="right">
</div>

score 1 · Answer 2

Taking advantage of the example given, this should be what you want.

<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>