This time I will share jQuery Plugin and tutorial about Animate Box Shadows With jQuery – Shadow Animation, hope it will help you in programming stack.
Shadow Animation is a simple to use jQuery shadow animation plugin that allows you to animate the shadows of any block element using jQuery’s animate() method.
Works in any browser supporting CSS box-shadow property and RGBA color mode.
Supported box-shadow Values:
- offset-x
- offset-y
- blur-radius
- spread-radius
- color
How to use it:
1. Download the plugin and insert the minified version of the Shadow Animation plugin after jQuery.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/jquery.animate-shadow.min.js"></script> |
2. Apply initial box shadows to your element (Recommended).
4 |
box-shadow: 0 0 10px #699, 0 0 10px #969, 0 0 10px #996, 0 0 10px #669; |
6 |
-moz-box-shadow: 0 0 10px #699, 0 0 10px #969, 0 0 10px #996, 0 0 10px #669; |
7 |
-webkit-box-shadow: 0 0 10px #699, 0 0 10px #969, 0 0 10px #996, 0 0 10px #669; |
3. Bind the shadow animation to mouse hover or click events as follows:
2 |
onmouseover="jQuery(this).stop().animate({boxShadow: '-30px 0 30px #699, 30px 0 30px #969, 0 -30px 30px #996, 0 30px 30px #669'})" |
3 |
onmouseout="jQuery(this).stop().animate({boxShadow: '0 0 10px #699, 0 0 10px #969, 0 0 10px #996, 0 0 30px #669'}) |
This awesome jQuery plugin is developed by edwinm. For more Advanced Usages, please check the demo page or visit the official website.
