Latest web development tutorials

jQuery UI API - Warna Animasi (Color Animasi)

jQuery UI inti menambahkan efek khusus menggunakan rgb() , rgba() , nilai-nilai heksadesimal atau nama warna seperti "aqua" untuk secara dinamis mengubah atribut warna fungsi. Hanya Anda perlu menyertakan jQuery UI berkas efek inti, .animate() akan mendukung warna.

Mendukung atribut berikut:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • columnRuleColor
  • outlineColor
  • textDecorationColor
  • textEmphasisColor

Dukungan untuk warna animasi dari jQuery plugin Color . Warna plug-in menyediakan sejumlah fungsi untuk warna. Untuk melihat dokumen lengkap, kunjungi dokumen jQuery Color .

Animasi Kelas (Kelas Animasi)

Meskipun dimungkinkan untuk menghidupkan warna atribut secara langsung, tetapi metode alternatif biasanya lebih baik yang berisi gaya dalam kelas. jQuery UI menyediakan metode untuk secara dinamis menambahkan atau menghapus kelas CSS, yaitu .addClass() , .removeClass() , .toggleClass() dan .switchClass() . Metode ini secara otomatis akan menentukan sifat perlu diubah dan apa yang perlu menerapkan animasi yang sesuai.

contoh 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> Color Animasi (Color Animasi) Demo </ title>
  <Link rel = "stylesheet" href = "http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Gaya>
  #elem {
    color: # 006;
    background-color: #aaa;
    font-size: 25px;
    padding: 1em;
    text-align: center;
  }
  </ Style>
  <Script src = "http://code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "http://code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Kepala>
<Body>
 
<Div id = "elem"> Color Animasi </ div>
<Tombol id = "beralih"> perubahan warna </ button>
 
<Script>
$ ( "#toggle") .Klik (Fungsi () {
  $ ( "#elem") .animate ({
    Warna: "hijau",
    backgroundColor: "rgb (20, 20, 20)"
  });
});
</ Script>
 
</ Body>
</ Html>