<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css"/> <script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script> <script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script> <script> $(document).ready(function(){ $(function() { $("#button").click(function() { $('#effect').addClass('newClass', 1000, callback); return false; }); function callback(){ setTimeout(function(){ $('#effect').removeClass('newClass'); }, 1500); } }); }); </script> </head> <body class="iframe"> <div class="demo"> <div class="toggler"> <div id="effect" class="ui-corner-all"> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. </div> </div> <button id="button" class="ui-state-default ui-corner-all">Run Effect</button> </div><!-- End demo --> <div style="display: none;" class="demo-description"> <p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p> </div><!-- End demo-description --> </body> </html> <style> .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; } </style>
Тип
По умолчанию
Описание
строка
По умолчанию
vertical
Описание
Единый CSS класс добавляемый к элементам.
Тип
По умолчанию
Описание
Строка, число
По умолчанию
hide
Описание
Строка представленная одним из трёх, предопределённых значений скорости ("slow", "normal", или "fast") или числом в миллисекундах для выполнения анимации (например, 1000).