jQuery оживить цвет фона. Удалить Math.random

Question

Я хочу анимировать между массивом цветов фона.

Я нашел следующий код, но он использует Math.random для отображения цветов фона в случайном порядке.

$(document).ready(function() { 
    setInterval(function() { 
     var theColours = Array('#ffffff','#000000','#00ff00','#ff0000','#0000ff'); 
     var theColour = theColours[Math.floor(Math.random()*theColours.length)]; 
     $('#branding').animate({backgroundColor: theColour}, 500); 
    }, 1000); 
}); 

JSFiddle

Я хочу, чтобы удалить Math.random и отобразить следующий цвет в массиве.

Однако, если я заменяю Math.random, то при этом анимация не выходит за рамки первого цвета в массиве.

$(document).ready(function() { 
    setInterval(function() { 
     var theColours = Array('#ffffff','#000000','#00ff00','#ff0000','#0000ff'); 
     var currentColour = 0; 
     var theColour = theColours[Math.floor(currentColour++ % theColours.length)]; 
     $('#branding').animate({backgroundColor: theColour}, 500); 
    }, 1000); 
}); 

Answer 1

Поскольку currentColour объявлен внутри setInterval функции, вы создаете новую переменную currentColour и установить его в 0 каждый раз, когда вызывается функция. Вместо того, чтобы двигаться currentColour вне области видимости функции:

$(document).ready(function() { 
    var currentColour = 0; // This variable is now shared by each function call 
    setInterval(function() { 
     var theColours = Array('#ffffff','#000000','#00ff00','#ff0000','#0000ff'); 
     var theColour = theColours[Math.floor(currentColour++ % theColours.length)]; 
     $('#branding').animate({backgroundColor: theColour}, 500); 
    }, 1000); 
}); 

Answer 2

Проблема заключается в повторной инициализации «theColour» в самом коде.

$(document).ready(function() { 
var currentColour = 0; 
    setInterval(function() { 
     var theColours = Array('#ffffff','#000000','#00ff00','#ff0000','#0000ff');    
     var theColour = theColours[Math.floor(currentColour++ % theColours.length)]; 
     $('#branding').animate({backgroundColor: theColour}, 500); 
    }, 1000); 
}); 

Answer 3

Вы должны определить currentColour из функции setInterval

$(document).ready(function() { 
 
\t \t var currentColour = 0; 
 
    setInterval(function() { 
 
     var theColours = Array('#ffffff','#000000','#00ff00','#ff0000','#0000ff'); 
 
     var theColour = theColours[Math.floor(currentColour++ % theColours.length)]; 
 
     $('#branding').animate({backgroundColor: theColour}, 500); 
 
    }, 1000); 
 
});