JQuery .animate() - Sintaks
« BAB Sebelumnya - BAB 2: Sintaks
$(sasaran).animate({properti:"value", properti:"value"}, durasi);
Sasaran: adalah objek yang akan dikenai perintah
Properti: properti CSS (dalam sintaks JQuery) yang akan dianimasikan
Value: nilai properti.
Durasi: adalah kecepatan aksi. Nilainya bisa berupa milidetik (misal: 1500
, 2000
) atau 'slow'
, 'normal'
dan 'fast'
.
Contoh Penerapan Efek .animate() untuk Nilai Bertipe Numerik
Kita buat sebuah tombol dan sebuah area target. Tombol yang kita buat berfungsi untuk menganimasikan elemen:
Kerangka
<button class='animasi'>Memanjang!</button>
<div id='target'>
<!-- Konten di Sini -->
</div>
CSS
#target {
background:#123456;
width:210px;
height:50px;
padding:5px;
}
Deklarasi JQuery
$(document).ready(function() {
$('.animasi').click(function() {
$('#target').animate({width:"800px"}, 1000);
});
});
Contoh Penerapan Efek .animate() untuk Nilai Bertipe Warna
Seperti yang pernah Saya katakan di BAB sebelumnya, bahwa efek animasi warna bisa dibuat dengan syarat menambahkan plugin berupa jquery.animate-colors-min.js yang dipasang bersama JQuery. Untuk itu, hal pertama yang harus kamu lakukan adalah memasang script jquery.animate-colors-min.js di dalam template:
<script type='text/javascript' src='http://hompimpa.googlecode.com/files/jquery.animate-colors-min.js'></script>
Setelah itu barulah kita bisa menerapkan properti-properti warna dalam deklarasi JQuery:
Kerangka
<button class='animasi'>Berubah!</button>
<div id='target'>
<!-- Konten di Sini -->
</div>
CSS
#target {
background:#FF00FF;
color:#000000;
width:210px;
height:100px;
padding:5px;
}
Deklarasi JQuery
$(document).ready(function() {
$('.animasi').click(function() {
$('#target').animate({backgroundColor:"#000080", color:"#ffffff"}, 1000);
});
});
7 Comments:
kok habis memanjang atau berubah gag bisa balik lagi ya??
@Bayu Aldi Yansyah: Ya, tidak kembali karena ini hanya efek sekali klik, dan perintahnya memang hanya menganimasikan panjang elemen saja. Kalau mau yang bisa bolak-balik bisa pakai deklarasi width:"toggle"
Wuaaah jquery kereeen :D Jadi pengin ubek2 jquery, tapi lagi fokus dulu ke web desain >.<
Misi, mampir ah bro :D
Numpang Sedot gan
kalau untuk ngembaliin konten ke ukuran semula, menggunakan tombol yg sama. codenya gimana bang ? 0:)
$(function() {
$('button').toggle(function() {
$('div').animate({width:400}, "slow");
}, function() {
$('div').animate({width:100}, "slow"); // `100` diambil dari ukuran awal
});
});
Demo: http://jsfiddle.net/tovic/N6RrA/
Terkait: Event .toggle()
Post a Comment
<< Home