jQuery UI Effects - addClass Demo
.toggler { width: 500px; height: 200px; position: relative;}
#button { padding: .5em 1em; text-decoration: none; }
#effect {position: relative; width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
#effect.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
$(function() {
$("#button").click(function() {
$('#effect').addClass('newClass', 1000, callback);
return false;
});
function callback(){
setTimeout(function(){
$('#effect').removeClass('newClass');
}, 1500);
}
});
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.