I have a container on my webpage with a light blue background, and I want the background color to darken progressively with each click. Currently, I am manually setting an array of colors for this purpose, but I am struggling to make the background color change as desired.
When attempting to change the background color, I am encountering error messages related to parsing the color. I have tried adjusting the background-color property in my CSS file and even removing it altogether, but none of these approaches seem to work effectively (removing it results in no background color being displayed).
Below is a snippet of the code that I have been working with, inspired by a similar jsfiddle example from another source:
http://jsfiddle.net/arunpjohny/3eGM5/$(document).ready(function() {
var blues = ['#c4c4fd', '#5d5dbc'],
counter = 0;
$(".content").click(function() {
$(".content").animate({
backgroundColor: blues[counter++]});
#The text within this div also changes upon clicking, so here is the corresponding animation for that section. It seems to be functioning correctly.
var current = $('.active');
var next = current.next('.section');
if(next.length === 0) {
next = $('.section').first();
};
current.fadeOut(400).removeClass('active');
next.delay(100).fadeIn(1500).addClass('active');
});
});
Could there be a straightforward solution that I am overlooking? As a newcomer to jQuery, any guidance or advice you can provide would be greatly appreciated!