Latest web development tutorials

jQuery UI contoh - beralih Kelas (Beralih Kelas)

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.

Untuk informasi lebih lanjut tentang .toggleClass() rincian metode, lihat dokumentasi API .toggleClass () .

.toggleClass () Demo

Klik tombol untuk melihat efek. 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI Efek - .toggleClass () Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Gaya>
  .toggler {width: 500px; height: 200px; position: relative;}
  #button {padding: .5em 1em; text-decoration: none;}
  #effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid # 000; background: #eee; color: # 333;}
  .newClass {text-indent: 40px; letter-spacing: .4em; width: 410 px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em;}
  </ Style>
  <Script>
  $ (Fungsi () {
    $ ( "#button") .Klik (Fungsi () {
      $ ( "#effect") .toggleClass ( "NewClass", 1000);
      return false;
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div class = "toggler">
  <Div id = "efek" class = "newClass ui-sudut-semua">
      Etiam libero neque, luctus sebuah, eleifend nec, sempre di, lorem. Sed pede.
  </ Div>
</ Div>
 
<a href="#" id="button" class="ui-state-default ui-corner-all"> menjalankan efek </a>
 
 
</ Body>
</ Html>