Лучшее руководство по JQuery UI - примеры преобразования класса (коммутатор класса) в 2024 году. В этом руководстве вы можете изучить .switchClass () Демо,
При изменении стиля анимации в наборе соответствующих элементов для добавления и удаления каждого элемента указанного класса.
Для получения дополнительной информации о .switchClass() подробные данные о методах, см API документации .switchClass () .
Нажмите кнопку для предварительного просмотра эффектов.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI эффекты - .switchClass () Demo </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
.toggler {ширина: 500px; высота: 200px; положение: относительная;}
#button {утеплитель: .5em 1em; текст-отделка: нет;}
#effect {позиция: относительная;}
.newClass {ширина: 240px; обивка: 1em; письмо-интервал: 0; размер шрифта: 1.2em; маржа: 0;}
.anotherNewClass {текст-отступов: 40px; письмо-интервал: .4em; ширина: 410px; высота: 100px; обивка: 30px; Маржа: 10px; размер шрифта: 1.6em;}
</ Style>
<Script>
$ (Function () {
$ ( "#button") .click (Функция () {
$ ( ".newClass") .switchClass ( "NewClass", "anotherNewClass", 1000);
$ ( ".anotherNewClass") .switchClass ( "AnotherNewClass", "NewClass", 1000);
возвращение ложным;
});
});
</ Script>
</ Head>
<Body>
<Div класс = "Toggler">
<Div ID = "эффект" класс = "NewClass пользовательский интерфейс угла всех">
Etiam либеро neque, luctus а, eleifend включенные в другие группировки, Semper, в Lorem. Сед Pede.
</ Div>
</ Div>
<a href="#" id="button" class="ui-state-default ui-corner-all"> запускать эффекты </a>
</ Body>
</ HTML>