Latest web development tutorials

contoh UI jQuery - Kelas Konversi (Beralih Kelas)

Ketika perubahan gaya animasi dalam kumpulan elemen cocok untuk menambah dan menghapus setiap elemen yang ditentukan Class.

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

.switchClass () Demo

Klik tombol untuk melihat efek. 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI Efek - .switchClass () 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;}
  .newClass {width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0;}
  .anotherNewClass {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 () {
      $ ( ".newClass") .switchClass ( "NewClass", "anotherNewClass", 1000);
      $ ( ".anotherNewClass") .switchClass ( "AnotherNewClass", "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>