jQuery Bounce Animation Plugin - Bounce
| File Size: | 37.4KB |
|---|---|
| Views Total: | 1992 |
| 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.











