jQuery Bounce Animation Plugin - Bounce

File Size: 37.4KB
Views Total: 1977
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Bounce Animation Plugin - Bounce

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.