Jqueryui-removeclass
JqueryUI-クラスを削除
この章では、* removeClass（）*メソッドについて説明します。これは、jQueryUI視覚効果の管理に使用されるメソッドの1つです。 _removeClass（）_メソッドは、適用されたクラスを要素から削除します。
_removeClass（）_メソッドは、すべてのスタイル変更をアニメートしながら、指定されたクラスを一致した要素から削除します。
構文
jQueryUIのバージョン1.0で追加
- removeClass（）*メソッドの基本的な構文は次のとおりです-
.removeClass( className [, duration ] [, easing ] [, complete ] )| Sr.No. | Parameter & Description |
|---|---|
| 1 |
className これは、削除する1つ以上のCSSクラス（スペースで区切られた）を含む文字列です。 |
| 2 |
duration これは、Number型またはString型であり、エフェクトのミリ秒数を示します。 値が0の場合、要素は進行せずに新しいスタイルで直接使用されます。 デフォルト値は_400_です。 |
| 3 |
easing これはString型で、エフェクトの進行方法を示します。 デフォルト値は_swing_です。 可能な値はlink：/jqueryui/jqueryui_easings [ここ]です。 |
| 4 |
complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。 |
jQueryUIのバージョン1.9で追加
バージョン1.9では、このメソッドは_children_オプションをサポートするようになりました。これは子孫要素もアニメーション化します。
.removeClass( className [, options ] )| Sr.No. | Parameter & Description |
|---|---|
| 1 |
className これは、1つ以上の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 に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-
[クラスの追加]ボタンと[クラスの削除]ボタンをクリックして、ボックスに対するクラスの効果を確認します。
