jQuery UI API - .toggleClass ()
kategori
efek khusus (Effects) | Efek Inti (Core Effects) | Metode overloading (Metode Menggantikan)
pemakaian
Keterangan: Ketika gaya animasi berubah, sesuai dengan keberadaan Kelas dan nilai parameter saklar dalam kumpulan elemen cocok dari setiap elemen untuk menambahkan atau menghapus satu atau lebih kelas.
Pengembalian: jQuery
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
ClassName | String | 为匹配的元素集合中的每个元素要切换的一个或多个 class 名称,多个 class 名称用空格分隔 。 | |
switch | Boolean | 一个布尔值,指定 class 应被添加还是被移除。 | |
duration | Number 或 String | 一个字符串或一个数字,指定动画将运行多久。 | 400 |
easing | String | 一个字符串,指示要使用的 easing 函数。 | swing |
complete | Function() | 一旦动画完成时要调用的函数。 |
参数 | 类型 | 描述 |
---|---|---|
ClassName | String | 为匹配的元素集合中的每个元素要切换的一个或多个 class 名称,多个 class 名称用空格分隔 。 |
switch | Boolean | 一个布尔值,指定 class 应被添加还是被移除。 |
options | Object | 所有的动画设置。所有的属性是可选的。
|
Transisi mirip dengan CSS asli, jQuery UI kelas animasi memberikan kelancaran transisi dari satu negara ke negara lain transisi, sambil memastikan bahwa semua rincian dari perubahan gaya dilakukan melalui CSS tanpa menggunakan JavaScript. Semua animasi kelas, terdiri .toggleClass()
, memungkinkan durasi kebiasaan animasi dan mengurangi fungsi, animasi selesai juga menyediakan callback.
Tidak semua gaya dapat animasi untuk menambahkan. Misalnya, gambar latar belakang animasi. Tidak setiap gaya animasi akan berubah ketika film berakhir.
Ekstensi plug-in dari jQuery dibangun () .toggleClass metode. Jika jQuery UI tidak dimuat, panggilan .toggleClass()
metode tidak hanya gagal, karena metode yang ada dalam jQuery. Tapi itu tidak diharapkan perilaku.
contoh
Untuk mencocokkan switching kelas elemen "besar-biru".
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> .toggleClass () Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Gaya> div { width: 100px; height: 100px; background-color: # ccc; } .big-biru { width: 200px; height: 200px; background-color: # 00F; } </ Style> <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ Kepala> <Body> <Div> </ div> <Script> $ ( "Div") .Klik (function () { $ (Ini) .toggleClass ( "big-biru", 1000, "easeOutSine"); }); </ Script> </ Body> </ Html>