Slider.js - Slideshow with jQuery, CSS Transitions and Canvas
The canvas transitions are definitely the most interesting to me, and this provides nice wrapper code to create custom canvas animation functions. Performance appears to be a huge advantage over CSS.
Example: Click me!
// Adds dots ... while the element has the waiting class
jQuery.fn.waitingDots = function(waitingClass, maxDots, onComplete) {
var e = $(this);
var term = e.val() || e.text();
e.addClass(waitingClass);
var count = 0;
var numDots = maxDots || 3;
var interval = setInterval(function() {
if (!e.hasClass(waitingClass)) {
clearInterval(interval);
onComplete.apply(e);
}
else {
var newText = term + " .".take(count);
e.val(newText).text(newText); // Update text
count < numDots ? count++ : count = 0; // Update counter
}
}, 400);
};Example of Use:
$('#button').click(function(e) {
var button = this;
$(button).text("Saving ");
setTimeout(function() {
$(button).removeClass("waiting");
},5000);
$(button).waitingDots("waiting", 4, function(e) {
$(button).text("Yay, it worked!");
});
e.preventDefault();
});Note: Requires take() function, available here.
Amazing framework for SVG in a browser.
Advantages over canvas include DOM scripting, scaling, and events support to help with interactive animations.
In response to Meebo Javascript Puzzler
function argSort(){return Array.prototype.slice.call(arguments).sort();}
