2009-02-27 18:05:18 +00:00
<!doctype html>
< html lang = "en" >
< head >
< title > jQuery UI Effects - addClass Demo< / title >
< link type = "text/css" href = "http://jquery-ui.googlecode.com/svn/trunk/themes/base/ui.all.css" rel = "stylesheet" / >
< script type = "text/javascript" src = "http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js" > < / script >
< script type = "text/javascript" src = "http://jquery-ui.googlecode.com/svn/trunk/ui/effects.core.js" > < / script >
< link type = "text/css" href = "http://jquery-ui.googlecode.com/svn/trunk/demos/demos.css" rel = "stylesheet" / >
< style type = "text/css" >
.toggler { width: 500px; height: 200px; position: relative;}
#button { padding: .5em 1em; text-decoration: none; }
2009-02-27 19:06:57 +00:00
#effect {position: relative; width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
#effect.newClass { line-height: 2; text-indent: 40px; opacity: .8; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; border: 5px solid orange; background: #2c4359; color: #fff; }
2009-02-27 18:05:18 +00:00
< / style >
< script type = "text/javascript" >
$(function() {
$("#button").click(function() {
2009-02-27 19:06:57 +00:00
$('#effect').addClass('newClass', 1000, callback);
2009-03-02 09:26:09 +00:00
return false;
2009-02-27 18:05:18 +00:00
});
function callback(){
setTimeout(function(){
2009-02-27 19:06:57 +00:00
$('#effect').removeClass('newClass');
}, 1500);
2009-02-27 18:05:18 +00:00
}
});
< / script >
< / head >
< body >
< div class = "demo" >
< div class = "toggler" >
2009-02-27 19:06:57 +00:00
< div id = "effect" class = " ui-corner-all" >
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
2009-02-27 18:05:18 +00:00
< / div >
< / div >
< a href = "#" id = "button" class = "ui-state-default ui-corner-all" > Run Effect< / a >
< / div > <!-- End demo -->
< div class = "demo-description" >
2009-02-27 19:06:57 +00:00
< p > This demo adds a class which animates: line-height, text-indent, opacity, letter-spacing, width, height, padding, margin, font-size, border color, border-width, background color, and font color. < / p >
2009-02-27 18:05:18 +00:00
< / div > <!-- End demo - description -->
< / body >
< / html >
