JqueryUI - удалить класс
В этой главе мы обсудим removeClass()метод, который является одним из методов, используемых для управления визуальными эффектами jQueryUI. Метод removeClass () удаляет примененные классы из элементов.
Метод removeClass () удаляет указанные классы в соответствующие элементы при анимации всех изменений стиля.
Синтаксис
Добавлено в версии 1.0 jQueryUI
В removeClass() метод имеет свой основной синтаксис следующим образом -
.removeClass( className [, duration ] [, easing ] [, complete ] )| Sr.No. | Параметр и описание |
|---|---|
| 1 | className Это строка, содержащая один или несколько классов CSS (разделенных пробелами), которые необходимо удалить. |
| 2 | duration Имеет тип Number или String и указывает количество миллисекунд эффекта. Значение 0 принимает элемент непосредственно в новом стиле, без прогресса. Его значение по умолчанию - 400 . |
| 3 | easing Это тип String, и он указывает способ продвижения эффекта. Его значение по умолчанию - swing . Возможные значения здесь . |
| 4 | complete Это метод обратного вызова, вызываемый для каждого элемента, когда эффект для этого элемента завершен. |
Добавлено в версии 1.9 jQueryUI
В версии 1.9 этот метод теперь поддерживает параметр дочерних элементов, который также будет анимировать дочерние элементы.
.removeClass( className [, options ] )| Sr.No. | Параметр и описание |
|---|---|
| 1 | className Это строка, содержащая один или несколько классов CSS (разделенных пробелами). |
| 2 | options Здесь представлены все настройки анимации. Все свойства необязательны. Возможные значения -
|
Примеры
В следующем примере демонстрируется использование методов removeClass () .
Прохождение одиночного класса
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>jQuery UI removeClass Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.elemClass {
width: 200px;
height: 50px;
background-color: #b9cd6d;
}
.myClass {
font-size: 40px; background-color: #ccc; color: white;
}
</style>
<script type = "text/javascript">
$(document).ready(function() {
$('.button').click(function() {
if (this.id == "add") {
$('#animTarget').addClass("myClass", "fast")
} else {
$('#animTarget').removeClass("myClass", "fast")
}
})
});
</script>
</head>
<body>
<div id = animTarget class = "elemClass">
Hello!
</div>
<button class = "button" id = "add">Add Class</button>
<button class = "button" id = "remove">Remove Class</button>
</body>
</html>Сохраним приведенный выше код в HTML-файл. removeclassexample.htmи откройте его в стандартном браузере, поддерживающем javascript, вы также должны увидеть следующий вывод. Теперь вы можете поиграть с результатом -
Нажмите кнопки « Добавить класс» и « Удалить класс», чтобы увидеть эффект классов на поле.