var SpriteAnimation = new Class({ // MooTools Class ... Implements: [Options, Loop], // looks normal so far options: { frameWidth: 75, frames: 10, frameRate: 100, defaultPosition: {x: 0, y :0} }, jQuery: 'animateSprite', // huh? initialize: function(element, options){ this.setOptions(options); this.setLoop(this.step, this.options.frameRate); this.element = jQuery(element); // jQuery?! var pos = this.options.defaultPosition.x + 'px ' + this.options.defaultPosition.y + 'px'; this.element.css({'background-position': pos}); // moar jQuery!? this.startLoop(); }, step: function(){ var x = this.computeX(); var y = this.computeY(); this.element.css({'background-position': x+'px '+ y+'px'}); // it's taking over! return this; }, computeX: function(){ this.loopCount = (this.loopCount == (this.options.frames)) ? this.options.defaultPosition.x : this.loopCount return -this.loopCount * this.options.frameWidth; }, computeY: function(){ return this.options.defaultPosition.y; } }); // what on earth is happening?! jQuery(document).ready(function(){ // instantiate $('#spinner').animateSprite({ frameWidth: 64, frames: 12, frameRate: 50 }); // or the object oriented way ... /* var spinner = new SpriteAnimation('#spinner',{ frameWidth: 64, frames: 12, frameRate: 50 }); */ $('#stop').click(function(){ // call methods on it w/ the jQuery object. $('#spinner').animateSprite('stopLoop'); // or the object oriented way ... // spinner.stopLoop(); $('#spinner').fadeOut(); $('#start').attr('disabled', false); $(this).attr('disabled', true); }); $('#start').click(function(){ $('#spinner').animateSprite('startLoop'); $('#spinner').fadeIn(); $('#stop').attr('disabled', false); $(this).attr('disabled', true); }); });
#ftw { font-family: helvetica, arial; position: relative; background: #ccc; color: #000; padding: 20px; font-size: 20px; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.5); -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.5); text-shadow: #fff 0 1px 0; } #spinner { width: 64px; height: 64px; background-image: url(http://ryanflorence.com/jsfiddle/mootools-jquery/spinner.png); background-repeat: no-repeat; background-position: 0 0; position: absolute; top: 24px; left: 20px; }
<h1 id="ftw"> I'm a MooTools Class,<br/> but I use jQuery for everything else.<br/> Alpha transparency is cool. <div id="spinner"></div> <br /><br /> <button id="stop">stop</button> <button id="start" disabled="true">start</button> </h1>