JqueryUI-スイッチクラス
この章では、 switchClass()メソッド。これは、操作に役立つ新しいクラスです。switchClass（）メソッドは、あるCSSから別のCSSクラスに移動し、ある状態から別の状態への遷移をアニメーション化します。
構文
jQueryUIのバージョン1.0で追加されました
ザ・ switchClass() メソッドの基本的な構文は次のとおりです。
.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )| シニア番号 | パラメータと説明 |
|---|---|
| 1 | removeClassName これは文字列であり、削除するCSSクラス名またはクラス名のスペース区切りリストを表します。 |
| 2 | addClassName これはString型であり、一致した各要素のクラス属性に追加される1つ以上のクラス名（スペースで区切られている）を表します。 |
| 3 | duration これは数値または文字列のタイプであり、オプションで、低速、通常、高速、または効果の持続時間をミリ秒単位で提供します。省略した場合、animate（）メソッドがデフォルトを決定します。デフォルト値は400です。 |
| 4 | easing animate（）メソッドに渡されるイージング関数の名前。 |
| 5 | complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。 |
jQueryUIのバージョン1.9で追加されました
バージョン1.9では、このメソッドは子オプションをサポートするようになりました。これにより、子孫要素もアニメーション化されます。
.switchClass( removeClassName, addClassName [, options ] )| シニア番号 | パラメータと説明 |
|---|---|
| 1 | removeClassName これは文字列であり、削除するCSSクラス名またはクラス名のスペース区切りリストを表します。 |
| 2 | addClassName これはString型であり、一致した各要素のクラス属性に追加される1つ以上のクラス名（スペースで区切られている）を表します。 |
| 3 | options これは、すべてのアニメーション設定を表します。すべてのプロパティはオプションです。可能な値は次のとおりです。
|
例
次の例は、switchClass（）メソッドの使用法を示しています。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Switch Class 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>
<!-- CSS -->
<style>
.LargeClass {
font-family: Arial;
font-size: large;
font-weight: bold;
color: Red;
}
.NormalClass {
font-family: Arial;
font-size: small;
font-weight: bold;
color: Blue;
}
</style>
<script>
$(function() {
$('#btnSwitch').click(function() {
$(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
$(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
return false;
});
});
</script>
</head>
<body>
<div class = "NormalClass">
Tutorials Point Rocks!!!
</div>
<div class = "NormalClass">
Welcome to Tutorials Point!!!
</div>
<br />
<input type = "button" id = "btnSwitch" value = "Switch Class" />
</body>
</html>上記のコードをHTMLファイルに保存しましょう switchclassexample.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-
[クラスの切り替え]ボタンをクリックして、ボックスに対するクラスの効果を確認します。