Animate Backgrounds Using jQuery And CSS Properties - animate-backgrounds

animate-backgrounds is a jQuery plugin which applies custom interactive animations to backgrounds of your containers using jQuery animate function and CSS background properties (gradient, position, size, etc.).

How to use it:

1. Include the necessary jQuery library and jQuery color plugin on the html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.color.min.js"></script>

2. Download and include the animate-backgrounds plugin's script after jQuery library.

<script src="animate-backgrounds.jquery.js"></script>

3. Set the start background properties for your container.

<div class="demo-1">
</div>

.demo-1 { background-image: radial-gradient(circle at left bottom, aquamarine 25%, deepskyblue 25%); }

4. Animate the background using jQuery animate function as this:

$('.demo-1').animate({
  backgroundImage: 'radial-gradient(circle at bottom left, aquamarine 50%, magenta 50%)',
},{
    // optional
    duration: 1500,
    easing: 'linear'
})

---

This awesome jQuery plugin is developed by helixbass. For more Advanced Usages, please check the demo page or visit the official website.