JQuery UI API - .switchClass ()
категория
Специальные эффекты (эффекты) | Эффекты Ядро (Core Effects) | Метод перегрузки (метод переопределяет)
использование
Описание: При изменении стиля анимации в наборе соответствующих элементов для добавления и удаления каждого элемента указанного класса.
Возвращает: Jquery
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
removeClassName | String | 要从每个匹配的元素的 class 属性中移除的一个或多个 class 名称,多个 class 名称用空格分隔 。 | |
addClassName | String | 要添加到每个匹配的元素的 class 属性中的一个或多个 class 名称,多个 class 名称用空格分隔。 | |
duration | Number 或 String | 一个字符串或一个数字,指定动画将运行多久。 | 400 |
easing | String | 一个字符串,指示要使用的 easing 函数。 | swing |
complete | Function() | 一旦动画完成时要调用的函数。 |
参数 | 类型 | 描述 |
---|---|---|
removeClassName | String | 要从每个匹配的元素的 class 属性中移除的一个或多个 class 名称,多个 class 名称用空格分隔 。 |
addClassName | String | 要添加到每个匹配的元素的 class 属性中的一个或多个 class 名称,多个 class 名称用空格分隔。 |
options | Object | 所有的动画设置。所有的属性是可选的。
|
.switchClass()
метод позволяет анимированными переходами, добавить класс при удалении класса.
Переход похож на родной CSS, класс анимации JQuery UI обеспечивает плавный переход от одного состояния в другое состояние перехода, обеспечивая при этом все детали изменения стиля осуществляется с помощью CSS без использования JavaScript. Весь класс анимации, включающий .switchClass()
, позволяет пользовательский продолжительность анимации и ослабление функции, анимация завершена также предоставляет функцию обратного вызова.
Не все стили могут быть анимированы, чтобы добавить. Например, фоновое изображение анимированные. Не любой стиль анимации изменится, когда фильм заканчивается.
Плагин расширений из JQuery построен метод .switchClass (). Если JQuery UI не загружается, вызовите .switchClass()
метод не просто не в состоянии , так как этот метод существует в JQuery. Но это не ожидаемое поведение.
примеров
Добавьте класс "синий", чтобы соответствовать элементы и удалить класс "большой" из соответствующих элементов.
<! DOCTYPE HTML> <HTML LANG = "EN"> <Head> <Meta Charset = "UTF-8"> <Title> .switchClass () Demo </ title> <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Style> DIV { ширина: 100px; высота: 100px; цвет фона: #ccc; } .big { ширина: 200px; высота: 200px; } .blue { цвет фона: # 00f; } </ Style> <Script SRC = "// code.jquery.com/jquery-1.10.2.js"> </ скрипт> <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт> </ Head> <Body> <Div класс = "большой"> </ DIV> <Script> $ ( "Див") .click (функция () { $ (Это) .switchClass ( "большой", "синий", 1000, "easeInOutQuad"); }); </ Script> </ Body> </ HTML>