3

Would like to ask for help regarding this one. I made 4 boxes with 2 background colors (red & green) without using html.

Here's my jsfiddle: https://jsfiddle.net/2bk1Ldg2/3/

How can I make a way to identify the existing background color css to change it alternately within 5sec (red to green & green to red).

Didn't know what's the best query to search regarding this kind of problem. Your awesome answers are a big help to my learning. Appreciate it a lot!

$(document).ready(function() {
function() {
    $( ".div1, .div3" ).animate({backgroundColor: 'red'
  }, 5000)};
});
Mohammad
  • 21,175
  • 15
  • 55
  • 84
Kobe Bryan
  • 317
  • 1
  • 3
  • 16
  • Toggle a class instead and hanlde animation in CSS... http://api.jquery.com/toggleclass/ – A. Wolff Oct 13 '16 at 08:41
  • You didn't know what to search?... just put your title in Google – musefan Oct 13 '16 at 08:42
  • Your demo has syntax error. I fixed it in https://jsfiddle.net/2bk1Ldg2/4/ . Now, you want to change color of all divs every 5s? – Mohammad Oct 13 '16 at 08:56
  • @Mohammad yeah. the existing red turns to green and green to red in every 5sec – Kobe Bryan Oct 13 '16 at 08:57
  • @Mohammad yow bro, would like to ask about this kind of approach. background change based from the background color of their previous element. So let's say: First box: red Second box: blue Third box: green Fourth box: yellow Then after 5 seconds the colors of the boxes should be like this: First box: yellow Second box: red Third box: blue Fourth box: green – Kobe Bryan Oct 17 '16 at 12:11
  • @KobeBryan I think that is good question. I can answer to it but that is bettor to asking new question that i and another user see it and answer to it. – Mohammad Oct 17 '16 at 12:18
  • @Mohammad it's the same concept but another kind of approach. from 2 colors to 4 colors. they will still mark it as duplicate – Kobe Bryan Oct 17 '16 at 12:21
  • @KobeBryan See http://stackoverflow.com/q/40087888/5104748 – Mohammad Oct 17 '16 at 13:50
  • @Mohammad thank you so much bro! i hope you could be my mentor in jquery. – Kobe Bryan Oct 17 '16 at 14:22
  • @Mohammad bro see http://stackoverflow.com/questions/40254911/how-to-slide-an-element-using-jquery/ ...how can I make the slide smoother without reducing the size of the element? jsfiddle.net/3me0cvsa/9 – Kobe Bryan Oct 26 '16 at 15:57

1 Answers1

1

You should use setInterval() to repeat your code for seconds. Because you added background of element in style attribute, you can use HTMLElement.style to get name backgroud color.

setInterval(function(){  
    $("div").each(function(){
        this.style.background = this.style.background == "green" ? "red" : "green";
    });
}, 5000);


setInterval(function(){  
  $("div").each(function(){
    this.style.background = this.style.background == "green" ? "red" : "green";
  });
}, 1000);
div { height: 50px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background: green"></div>
<div style="background: red"></div>
<div style="background: green"></div>
<div style="background: red"></div>
Mohammad
  • 21,175
  • 15
  • 55
  • 84
  • The code is good but there's something wrong in it. Maybe you forgot to make an if condition. @Mohammad – Kobe Bryan Oct 13 '16 at 09:27
  • @EricoTimbang No, one line code in `.each()` is condition. That is [Conditional (ternary) Operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) – Mohammad Oct 13 '16 at 09:31
  • I see. I've noticed that the interval will just activate when it's green. If it is red, it will wait for the other boxes to turn green first. https://jsfiddle.net/2bk1Ldg2/6/ Thank you very much for your help @Mohammad! Appreciated it a lot! – Kobe Bryan Oct 13 '16 at 09:45
  • @EricoTimbang Problem is in `line 4` of your code. You add `background-color` to element that shoud be `background`. See https://jsfiddle.net/2bk1Ldg2/7/ – Mohammad Oct 13 '16 at 09:54