🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Color Cycle is a jQuery plugin used to smoothly and continuously cycle through an array of predefined background colors of a specific container.

color background-color

Documentation
languages tags type resources
javascript
jquery, plugin
code along, example, exercise
0

jQuery Color Cycle Plugin

jQuery plugin that continuously fades the background color of selected element(s). Has options for setting colors as an array as well as animation time and loop time.

plugins.jquery.com/colorcycle/

Demo

Usage

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>jQuery Color Cycle Plugin Demo</title>   <style>     a {       display: table-cell;       text-align: center;       vertical-align: middle;       width: 100px;       height: 100px;       border-radius: 100%;       background-color: #ccc;     }   </style> </head> <body>   <h1>jQuery Color Cycle Plugin Demo</h1>   <h2>Example</h2>      <a>1</a>     <a>2</a>     <a>3</a>     <a>4</a>     <a>5</a>    <!-- jQuery v1.8.3 -->   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>      <!-- jQuery UI v 1.8.23 -->   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>      <!-- jQuery Color Cycle Plugin -->   <script src="color-cycle.min.js"></script>      <!-- Usage -->   <script>     $(function(){        $('a').colorCycle();      });   </script> </body> </html> 

Source Code

Customizing options

The colorCycle() method can be passed an object with the following settings available:

$('a').colorCycle({    // colors as array on strings pass any valid CSS color value.   colors: ['red', 'rgb(0,255,0)', '#0000ff'],      // starting and end range for animation time in milliseconds.   animationStartRange: 1000,   animationEndRange: 2000,    // starting and end range for loop time in milliseconds.   loopStartRange: 1000,   loopEndRange: 4000 }); 

License

MIT

Credits

Authors

Built with ♥ at the Flatiron School.

View this lesson on Learn.co


You May Also Like