Latest web development tutorials

contoh UI jQuery - Tambahkan Kelas (Tambah Kelas)

Ketika gaya animasi berubah untuk setiap elemen dari himpunan elemen cocok dalam Menambahkan tertentu Class.

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

.addClass () Demo

Klik tombol untuk melihat efek.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI Efek - .addClass () 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 {width: 240px; padding: 1em; 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") .addClass ( "NewClass", 1000, callback);
      return false;
    });
 
    fungsi callback () {
      setTimeout (function () {
        $ ( "#effect") .removeClass ( "NewClass");
      }, 1500);
    }
  });
  </ Script>
</ Kepala>
<Body>
 
<Div class = "toggler">
  <Div id = "efek" class = "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>