Переключить класс, определенный в первом аргументе на класс определенный во втором аргументе, используя необязательный эффект перехода.
|
|
<!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(){
$(".newClass").switchClass('newClass', 'anotherNewClass', 1000);
$(".anotherNewClass").switchClass('anotherNewClass', '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; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding:
0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
</style>
Тип
По умолчанию
Описание
строка
По умолчанию
Описание
CSS класс, который будет удалён.
Тип
По умолчанию
Описание
строка
По умолчанию
Optional
Описание
CSS класс, который будет добавлен.
Тип
По умолчанию
Описание
Строка, число
По умолчанию
Optional
Описание
Строка представленная одним из трёх, предопределённых значений скорости ("slow", "normal", или "fast") или числом в миллисекундах для выполнения анимации (например, 1000).
Александр Ермаков. Хостинг - www.pwstudio.org