jQuery :animated Selector

Contoh

Memillih element yang sedang dianimasi:

$(":animated")

Defenisi dan Penggunaan

Selektor :animated digunakan untuk memilih seluruh elemen yang sedang dianimasi.

Rumus

$("element:animated")

Contoh

Kita akan memilih elemen div yang sedang dianimasi, lalu mengubah warna latar belakangnya menjadi warna hijau saat tombol "Run" diklik.

Note: Bacalah komentar-komentar dalam kode di bawah ini untuk memudahkan anda memahami fungsi dan kegunaan dari selector :animated.

<html>
<head>
  <style>
  /** menyetel warna latar, garis tepi, lebar, tinggi, margin dan letak dari elemen div **/
  div {
    background: yellow;
    border: 1px solid #AAA;
    width: 80px;
    height: 80px;
    margin: 0 5px;
    float: left;
  }
  /** membuat class bernama "colored" pada elemen div dan memberi warna latar belakangnya dengan warna hijau **/
  div.colored {
    background: green;
  }
  </style>
  <script src="https://cdn.rawgit.com/cholebeharia/blogku/1a8ade58/jquery.min.js"></script>
</head>
<body>
  <button id="run">Run</button>
  <div></div>
  <div id="mover"></div>
  
  <script>
    // memberi event click pada button yang ber-id "run"
    $( "#run" ).click(function() {
    // memilih elemen div yang sedang dianimasi, lalu
    // mengubah class nya menjadi class "colored"
    $( "div:animated" ).toggleClass( "colored" );
    });
    // membuat fungsi bernama animateIt
    function animateIt() {
    // lalu memilih elemen div yang ber-id "mover",
    // serta mengubah slide animasinya menjadi "slow",
      $( "#mover" ).slideToggle( "slow", animateIt );
      }
      // memanggil kembali fungsi animateIt
      animateIt();
  </script> 
</body>
</html>

Anda bisa langsung mengedit isi dari kode-kode di atas dan melihat perubahannya.

Hasilnya:

Friday, 27 October 2017

Memilih Elemen yang Sedang Dianimasi Menggunakan Jquery

jQuery :animated Selector

Contoh

Defenisi dan Penggunaan

Rumus

Contoh

Related Articles :

Search This Blog

Stats

Arsip

Entri Populer

Pages