https://github.com/medihack/massanimate

Fast animation of hundreds of elements at once using Stylesheet rules.
https://github.com/medihack/massanimate

Last synced: 4 months ago
JSON representation

Fast animation of hundreds of elements at once using Stylesheet rules.

• Host: GitHub
• URL: https://github.com/medihack/massanimate
• Owner: medihack
• License: gpl-2.0
• Created: 2011-03-30T02:00:20.000Z (about 14 years ago)
• Default Branch: master
• Last Pushed: 2011-04-04T21:48:32.000Z (about 14 years ago)
• Last Synced: 2025-02-01T04:04:51.749Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 184 KB
• Stars: 9
• Watchers: 1
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: MIT-LICENSE.txt

Awesome Lists containing this project

README

        
# jQuery Mass Animate

## About

jQuery Mass Animate is a tiny but very powerful jQuery extension.

It allows to animate hundreds of elements at once and synchronously by using stylesheet rules

(instead of animating each element style like normally jQuery does).

[**Demo**](http://medihack.github.com/jquery-massanimate/demo/demo.html)

## Dependencies

It should work with jQuery >= 1.4.3. Tested with Firefox 3/4, Chrome, Opera 11, IE 7/8/9 on Windows and Linux.

## Usage

Simply add a class (e.g. "mass-animate") to all elements you would like to animate (this is usually pretty fast).

Then use `massanimate` like below:

    $.massanimate("div.mass-animate") // creates a new empty style rule

	.css({width: 50, height: 50, opacity: 0}) // set some initial style attributes

	.animate({width: 100, height: 100, opacity: 1}, 2000) // animate those attributes

	.animate({width: 50, height: 50, opacity: 0}, 2000, function() { // another animation

		// `this` is the massanimate object

		// do something afterwards

		var rule = this.rule(); // access the style rule (returns a CSSStyleRule object)

		this.remove(); // remove the added style rule and all its style attributes

	});

I hardly recommend setting the initial style attributes with the `css` method that you want to animate. You can also

set the styles using `css` between the `animate` methods.

`remove` deletes the rule again. After that you can't add new animations to that rule. `remove` is best called in a callback

when the animation is finished (like in the example above). A successful `remove` returns true. When `remove` is called while

an animation of this rule is still in progress then it is ignored and false is returned.

The `remove` is optional. You can also use Mass Animate to just set styles without any animations.

Keep in mind that *Mass Animate* can't animate already set element styles. This is because *Mass Animate* uses normal style

sheet definitions which can't override element styles (`!important` does not seem to work with jQuery animations).

## Credits

Thanks to David Tang and his very nice Javascript Stylesheet rule library [JSS](https://github.com/Box9/jss).

*Mass Animate* reuses some of his code to setup the CSS rules.

## License

Dual licensed under the MIT and GPL licenses: http://www.opensource.org/licenses/mit-license.php http://www.gnu.org/licenses/gpl.html

Copyright(c) 2011 Kai Schlamp