jQuery Bounce Animation Plugin - Bounce
File Size: | 37.4KB |
---|---|
Views Total: | 1977 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Bounce is a fast and simple jQuery plugin for bounce animation in a certain container with pure javascript.
Basic Usage:
1. Include necessary javascript files in the head section of your html page
<script language="JavaScript" src="js/jquery.js"></script> <script language="JavaScript" src="js/jquery.bounce.js"></script>
2. Markup html structure
<input type="button" id="start" value="Start" /> <input type="button" id="stop" value="Stop" /> <div style="position: absolute; left: 200px; top: 200px; width: 500px; height: 500px; background-color: black;" id="zone"></div> <div class="bounce"><img src="img/pikachu.gif" /></div> <div class="bounce"><img src="img/pikachu.gif" /></div> <div class="bounce"><img src="img/pikachu.gif" /></div>
3. Initialize the plugin with options
$(document).ready(function() { $('#start').click(function() { $('.bounce').each(function() { $(this).bounce('start', { 'minSpeed' : 1, 'maxSpeed' : 10, 'zone' : '#zone' }); }); }); $('#stop').click(function() { $('.bounce').each(function() { $(this).bounce('stop'); }); }); });
Change Log:
v0.1.2 (2013-03-14)
- Bug fixes
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.