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.
x
1
<html>2
<head>3
<style>4
/** menyetel warna latar, garis tepi, lebar, tinggi, margin dan letak dari elemen div **/5
div {6
background: yellow;7
border: 1px solid #AAA;8
width: 80px;9
height: 80px;10
margin: 0 5px;11
float: left;12
}13
/** membuat class bernama "colored" pada elemen div dan memberi warna latar belakangnya dengan warna hijau **/14
div.colored {15
background: green;16
}17
</style>18
<script src="https://cdn.rawgit.com/cholebeharia/blogku/1a8ade58/jquery.min.js"></script>19
</head>20
<body>21
<button id="run">Run</button>22
<div></div>23
<div id="mover"></div>24
25
<script>26
// memberi event click pada button yang ber-id "run"27
$( "#run" ).click(function() {28
// memilih elemen div yang sedang dianimasi, lalu29
// mengubah class nya menjadi class "colored"30
$( "div:animated" ).toggleClass( "colored" );31
});32
// membuat fungsi bernama animateIt33
function animateIt() {34
// lalu memilih elemen div yang ber-id "mover",35
// serta mengubah slide animasinya menjadi "slow",36
$( "#mover" ).slideToggle( "slow", animateIt );37
}38
// memanggil kembali fungsi animateIt39
animateIt();40
</script> 41
</body>42
</html>Anda bisa langsung mengedit isi dari kode-kode di atas dan melihat perubahannya.
Hasilnya:
