Опубликовано admin
- вт, 05/01/2018 - 23:36
<!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').removeClass('newClass', 1000, callback);
return false;
});
function callback(){
setTimeout(function(){
$('#effect').addClass('newClass');
}, 1500);
}
});
});
</script>
</head>
<body class="iframe">
<div class="demo">
<div class="toggler">
<div id="effect" class="newClass 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>Click the button above to preview the effect.</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; letter-spacing: 0; 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).