Добавить определенный класс, если он ещё не добавлен, и удалить определенный класс если он уже добавлен, используя необязательный эффект перехода.
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="jquery-ui-1.7.2.custom.css"
rel="stylesheet" type="text/css"/>
<script src="jquery-1.3.2.min.js"></script>
<script src="jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function(){
$(function() {
$("#button").click(function() {
$('#effect').toggleClass('newClass', 1000);
return false;
});
});
});
</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>
Тип
По умолчанию
Описание
строка
По умолчанию
Описание
CSS класс переключаемого элемента.
Тип
По умолчанию
Описание
Строка, число
По умолчанию
Optional
Описание
Строка представленная одним из трёх, предопределённых значений скорости ("slow", "normal", или "fast") или числом в миллисекундах для выполнения анимации (например, 1000).
Александр Ермаков. Хостинг - www.pwstudio.org