Skip to content

Instantly share code, notes, and snippets.

@jongrover
Created December 5, 2014 20:34
Show Gist options
  • Save jongrover/b437a7c6107015479743 to your computer and use it in GitHub Desktop.
Save jongrover/b437a7c6107015479743 to your computer and use it in GitHub Desktop.
jQuery Color Cycle Plugin Modified to change colors in order instead of selecting colors randomly
/* jQuery Color Cycle Plugin - v0.1.1 - created by: [email protected] */
(function ($) {
$.fn.colorCycle = function( options ) {
var settings = $.extend({
colors: ['#ff0000', '#ff6600', '#ff9900', '#ffcc00', '#ffff00', '#ccff00', '#99ff00', '#66ff00', '#00ff66', '#00ff99', '#00ffcc', '#00ffff', '#00ccff', '#0099ff', '#0066ff', '#0033ff', '#0000ff', '#3300ff', '#6600ff', '#9900ff', '#cc00ff', '#ff00ff', '#ff00cc', '#ff0099', '#ff0066'],
animationStartRange: 1000,
animationEndRange: 2000,
loopStartRange: 1000,
loopEndRange: 4000
}, options),
colorLength = settings.colors.length,
currentColorIndex = 0,
$el = this,
generateTime = function (min, max) {
return Math.floor(Math.random() * (max - min)) + min;
},
selectColor = function (currentColorIndex) {
//return settings.colors[Math.floor(Math.random() * settings.colors.length)];
return settings.colors[currentColorIndex];
},
changeColor = function (ele, currentColorIndex) {
ele.animate({
'background-color': selectColor(currentColorIndex)
}, generateTime(settings.animationStartRange, settings.animationEndRange), function () {
setTimeout(function () {
if (currentColorIndex < colorLength) {
currentColorIndex += 1;
changeColor(ele, currentColorIndex);
} else {
currentColorIndex = 0;
changeColor(ele, currentColorIndex);
}
}, generateTime(settings.loopStartRange, settings.loopEndRange));
});
},
initialize = function () {
for (i = 0; i < $el.size(); i++){
changeColor($el.eq(i), currentColorIndex);
}
};
initialize();
return $el;
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment