I am currently working on a project and I want to change the SVG color with time interval...
var bulbColors = [
'#FFFFFF',
'#27ae60',
'#16a085',
'#f39c12',
'#e74c3c',
'#9b59b6',
'#FB6964',
'#342224',
'#472E32',
'#BDBB99',
'#77B1A9',
'#2c3e50'
];
$(function (){
var i = 0
$('svg').find('path', this).attr('fill', 'bulbColors[i]')
setInterval(function(){
i++;
if (i == bulbColors.length){
i = 0;
}
$(this).fadeOut('slow', function () {
$('svg').find('path', this).attr('fill', 'bulbColors[i]')
$(this).fadeIn("slow");
})
}, 6000);
})
Try changing this code
$('svg').find('path', this).attr('fill', 'bulbColors[i]')
You need to unquote bulbColors[i], otherwise javascript reads the argument as a string, and not the hex color in the list at index [i].