Dengan jQuery, kita bisa membuat animasi khusus.
Section Artikel
Animasi jQuery – Metode animate()
Metode jQuery animate() digunakan untuk membuat animasi khusus.
Sintaks:
$(selector).animate({params},speed,callback);
Parameter params yang diperlukan menentukan properti CSS yang akan dianimasikan.
Parameter kecepatan opsional menentukan durasi efek. Ini dapat mengambil nilai berikut: “lambat”, “cepat”, atau milidetik.
Parameter callback opsional adalah fungsi yang akan dijalankan setelah animasi selesai.
Contoh berikut menunjukkan penggunaan sederhana metode animate() itu memindahkan elemen ke kanan, hingga mencapai properti kiri 250px:
Contoh :
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left: '250px'}); }); }); </script> </head> <body> <button> Mulai Animasi </button> <p> Secara default, semua elemen HTML memiliki posisi statis, dan tidak dapat dipindahkan. Untuk memanipulasi posisi, ingatlah untuk terlebih dahulu menyetel properti posisi CSS elemen menjadi relatif, tetap, atau absolut! </p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> </body> </html>
Secara default, semua elemen HTML memiliki posisi statis, dan tidak dapat dipindahkan.
Untuk memanipulasi posisi, ingatlah untuk terlebih dahulu mengatur properti posisi CSS elemen menjadi relatif, tetap, atau absolut!
jQuery animate() – Memanipulasi Beberapa Properti
Perhatikan bahwa beberapa properti dapat dianimasikan secara bersamaan:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
</head>
<body>
<button> Mulai Animasi </button>
<p> Secara default, semua elemen HTML memiliki posisi statis, dan tidak dapat dipindahkan. Untuk memanipulasi posisi, ingatlah untuk terlebih dahulu menyetel properti posisi CSS elemen menjadi relatif, tetap, atau absolut! </p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
Apakah mungkin untuk memanipulasi SEMUA properti CSS dengan metode animate ()?
Ya hampir! Namun, ada satu hal penting untuk diingat: semua nama properti harus menggunakan camel-cased saat digunakan dengan metode animate(): kita perlu menulis paddingLeft alih-alih padding-left, marginRight, bukan margin-right, dan seterusnya.
jQuery animate () – Menggunakan Nilai Relatif
Metode jQuery animete() digunakan untuk menentukan nilai relatif (nilainya kemudian relatif terhadap nilai elemen saat ini). Hal ini dilakukan dengan meletakkan + = atau – = di depan nilai:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
});
</script>
</head>
<body>
<button> Mulai Animasi </button>
<p> Secara default, semua elemen HTML memiliki posisi statis, dan tidak dapat dipindahkan. Untuk memanipulasi posisi, ingatlah untuk terlebih dahulu menyetel properti posisi CSS elemen menjadi relatif, tetap, atau absolut! </p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
jQuery animate() – Menggunakan Nilai yang Ditentukan Sebelumnya
Kita bisa menentukan nilai animasi properti sebagai "show", "hide", atau "toggle":
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
});
</script>
</head>
<body>
<p> Klik tombol beberapa kali untuk mengalihkan animasi. </p>
<button> Mulai Animasi </button>
<p> Secara default, semua elemen HTML memiliki posisi statis, dan tidak dapat dipindahkan. Untuk memanipulasi posisi, ingatlah untuk terlebih dahulu menyetel properti posisi CSS elemen menjadi relatif, tetap, atau absolut! </p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
jQuery animate() – Menggunakan Fungsi Antrian
Secara default, jQuery hadir dengan fungsionalitas antrian untuk animasi. Hal ini berarti bahwa jika kita menulis beberapa panggilan animate() setelah satu sama lain, jQuery membuat antrean “internal” dengan panggilan metode ini. Kemudian menjalankan panggilan animasi SATU demi SATU.
Jadi, jika kita ingin melakukan animasi yang berbeda satu sama lain, kita akan menggunakan fungsi antrian:
Contoh 1 :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
});
</script>
</head>
<body>
<button> Mulai Animasi </button>
<p> Secara default, semua elemen HTML memiliki posisi statis, dan tidak dapat dipindahkan. Untuk memanipulasi posisi, ingatlah untuk terlebih dahulu menyetel properti posisi CSS elemen menjadi relatif, tetap, atau absolut! </p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
Contoh di bawah ini pertama-tama memindahkan elemen <div> ke kanan, lalu meningkatkan ukuran font teks:
Contoh 2 :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
});
</script>
</head>
<body>
<button> Mulai Animasi </button>
<p> Secara default, semua elemen HTML memiliki posisi statis, dan tidak dapat dipindahkan. Untuk memanipulasi posisi, ingatlah untuk terlebih dahulu menyetel properti posisi CSS elemen menjadi relatif, tetap, atau absolut! </p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
