Simple Loop JQuery

Question

I know this has been asked several times but I just don't get it. So here's the case:

$ = jQuery;
    var loop = function() {
    $('#content').delay(800).css('background-color', "#B24296");
    $('#content').delay(1600).css('background-color', "#AEB404");
    $('#content').delay(2400).css('background-color', "#04B404");
    loop();
}
$(document).ready(function() {
    loop();

This setup gives me an "Uncaught RangeError: Maximum call stack size exceeded" I also tried this:

var loop = function() {
    $('#content').delay(800).css('background-color', "#B24296", function() {
        $('#content').delay(1600).css('background-color', "#AEB404", function() {
            $('#content').delay(2400).css('background-color', "#04B404");
        });
    });
}
$(document).ready(function() {
    setInterval(loop,3200);

With this code only the first color change happens but the rest of it won't. So unfortunately none of this does the job of simply changing the background-color from time to time ... Does anyone know a solution or can explain why non of this works?

Edit: Managed to get it to work like this:

function color(t) {
    $("div").delay(t*1).queue(function(n) {
         $('#green').css('background-color', "#B24296");
        n();
    });

    $("div").delay(t*2).queue(function(n) {
         $('#green').css('background-color', "#AEB404");        n();
    });

    $("div").delay(t*3).queue(function(n) {
         $('#green').css('background-color', "#04B404");
        n();
    });
    setTimeout(function() {
       color(500);
    }, 500);
}

color(500);

you also cannot perform .delay() on .css()... it just jumps to the end — PlantTheIdea
– PlantTheIdea, Commented Oct 28, 2013 at 21:54

Community · Accepted Answer · 2017-05-23 11:50:06Z

2

In your first attempt, the function loop() calls itself an infinite amount of times resulting in the error you reported.

As for why the css/delay combination doesn't work, as per this answer: Using jQuery delay() with css() delay() works with the animation fx queue and has no effect on a css() call.

Again per the solution in Using jQuery delay() with css(), here is working code for your use case (http://jsfiddle.net/mmSVF/3/):

var loop = function() {
  $('#content').delay(800).queue(function(next){
      $(this).css('background-color', "#B24296");
      next();
  }).delay(1600).queue(function(next){
      $(this).css('background-color', "#AEB404");
      next();
  }).delay(2400).queue(function(next){
      $(this).css('background-color', "#04B404");
      setTimeout(loop, 500);
      next();
  });
}

$(function(){
    loop(); 
});

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Oct 28, 2013 at 21:59

Cam

1,7062 gold badges13 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arnold Zak Over a year ago

First of all, thank you. Second, this changes the color three times but just once, but i actually want it to change over and over again like an invinite loop, but without causing the error

Cam Over a year ago

You can add setTimeout(loop, 500); before the 3rd call to next() to achieve this result. I'll make this edit to the code in my answer.

Arnold Zak Over a year ago

Thanks you very much! This is the first solution I understand!

Collectives™ on Stack Overflow

Simple Loop JQuery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related