Yesterday I found an interesting question on Stack Overflow: is it possible to change multiple classes on a single click event in jQuery? Yes, it is. Let's see how.
The original question involved the use of a custom jQuery plugin, but we can summarize it as follows:
var obj = $('#test');
obj.bind('click', function() {
obj.toggleClass('bounce');
if(!obj.hasClass('bounce')) {
obj.toggleClass('vivify');
} else {
obj.removeClass('vivify');
}
});
To make it simple: first, the bounce class is added. On the second click, the aforementioned class is removed and the vivify class is added in turn. Finally, the bounce class is added again and the cycle restarts from the beginning.
You can see below two demos, the former without CSS3 animations and the latter with two custom CSS3 animations set on each class.