Pada seri tutorial JQuery kali ini, kita akan mempelajari efek animate.
Apakah itu???
Efek animate adalah salah satu efek dari JQuery yang memungkinkan suatu elemen HTML bergerak.
Gimana caranya???
Formatnya adalah seperti di bawah ini.
$("elemen_HTML").animate({nama_properti: isi_valuenya});
Oke, langsung aja kita coba ya…
- Buat file HTML, lalu ketikkan script berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Efek Animasi</title>
<style>
div
{
background-color: green;
height: 100px;
width: 100px;
position: relative;
margin-top: 100px;
}
</style>
</head>
<body>
<h2>Efek JQuery</h2>
<button class="jalan">Jalan</button>
<div></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function()
{
$(".jalan").click(function (e)
{
$("div").animate({left:"500"});
});
});
</script>
</body>
</html>
2. Maka akan tampil seperti ini pada browser.
3. Lalu klik tombol “Jalan”. Maka elemen “” akan berjalan.
Keterangan:
Pada script kode di atas, tepatnya pada bagian “.animate()”.
Nah, di dalamnya tanda “()”, terdapat parameter tambahan {left:”500″} yang berfungsi untuk menggerakkan elemen HTML (“div”) bergerak menjauhi titik awalnya dari sebelah kiri sejauh 500px.
Multiple Properties
Nah, pada contoh di atas tadi kita hanya gunakan satu properti aja.
Tapi pada kali ini, kita akan gunakan lebih dari satu properti.
Gunanya untuk memberikan efek animasinya lebih banyak.
Berikut ini adalah contoh scriptnya.
$(".jalan").click(function (e)
{
$("div").animate(
{
left:"500",
opacity: "0.5",
height: "150px",
width: "150px"
});
});
Pada kode di atas, adalah lanjutan kode dari contoh di atas.
Maka beginilah scriptnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Efek Animasi</title>
<style>
div
{
background-color: green;
height: 100px;
width: 100px;
position: relative;
margin-top: 100px;
}
</style>
</head>
<body>
<h2>Efek Animate</h2>
<button class="jalan">Jalan</button>
<div></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function()
{
$(".jalan").click(function (e)
{
$("div").animate(
{
left:"500",
opacity: "0.5",
height: "150",
width: "150"
});
});
});
</script>
</body>
</html>
Lalu saat dijalankan, posisi awalnya sama.
Yang membedakan hanya saat diklik tombol “Jalan” aja.
Berikut ini, adalah hasil setelah klik tombol “Jalan”.
Keliatan kan bedanya???
Itu karena ada tambahan properti berikut ini:
- Opacity: “0.5” , memberikan efek transparan. Untuk tingkat ketebalannya bisa diganti dengan mengubah angkanya.
- Height: “150”, mengubah tinggi elemen dari posisinya yang semula. Untuk ukurannya bisa diganti dari angkanya.
- Width: “150”, mengubah lebar elemen dari posisinya yang semula. Untuk ukurannya bisa diganti dari angkanya.
Relative Values
Kali ini untuk menentukan nilai relatif (nilai ukurannya bisa berubah dari nilai ukuran elemen HTML saat ini).
Caranya bisa dilakukan dengan meletakkan “+ =” atau “- =” di depan nilai elemennya.
Kali ini kita akan buat dua buah button.
<button class="besarkan">Besarkan</button> <button class="kecilkan">Kecilkan</button>
Lalu dipasangkan dengan script JQuery berikut ini.
$(".besarkan").click(function (e)
{
$("div").animate(
{
height: '+=150',
width: '+=150'
});
});
$(".kecilkan").click(function (e)
{
$("div").animate(
{
height: '-=150',
width: '-=150'
});
});
Maka begini script secara keseluruhan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Efek Animasi</title>
<style>
div
{
background-color: green;
height: 100px;
width: 100px;
position: relative;
margin-top: 100px;
}
</style>
</head>
<body>
<h2>Efek Animate</h2>
<button class="besarkan">Besarkan</button>
<button class="kecilkan">Kecilkan</button>
<div></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function()
{
$(".besarkan").click(function (e)
{
$("div").animate(
{
height: '+=150',
width: '+=150'
});
});
$(".kecilkan").click(function (e)
{
$("div").animate(
{
height: '-=150',
width: '-=150'
});
});
});
</script>
</body>
</html>
Maka, saat dijalankan pada browser akan tampil seperti berikut ini.
Selanjutnya, silahkan coba tekan tombol “Besarkan” atau tombol “Kecilkan”.
Maka kotak hijau akan membesar atau mengecil berdasarkan opsi menu tombol yang dipilih.
Pre Defined-Values
Value yang ini digunakan untuk menentukan nilai animasi pada properti seperti “show”, “hide”, atau “toggle”.
Layaknya efek-efek show hide, fade, slide.
Hanya aja, untuk animate ini bentuk hilang atau tampilnya berdasarkan properti yang dibutuhkan.
Sebagai contohnya:
height: "toggle"
Kita bisa membuat dengan tiga tombol berikut.
<button class="hide">Hide</button> <button class="show">Show</button> <button class="toggle">Toggle</button>
Dan pada JQuerynya diberikan fungsi seperti ini.
$(".hide").click(function (e)
{
$("div").animate(
{
height: 'hide'
});
});
$(".show").click(function (e)
{
$("div").animate(
{
height: 'show'
});
});
$(".toggle").click(function (e)
{
$("div").animate(
{
height: 'toggle'
});
});
Beginilah script keseluruhan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Efek Animasi</title>
<style>
div
{
background-color: green;
height: 100px;
width: 100px;
position: relative;
margin-top: 100px;
}
</style>
</head>
<body>
<h2>Efek Animate</h2>
<button class="hide">Hide</button>
<button class="show">Show</button>
<button class="toggle">Toggle</button>
<div></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function()
{
$(".hide").click(function (e)
{
$("div").animate(
{
height: 'hide'
});
});
$(".show").click(function (e)
{
$("div").animate(
{
height: 'show'
});
});
$(".toggle").click(function (e)
{
$("div").animate(
{
height: 'toggle'
});
});
});
</script>
</body>
</html>
Maka, seperti inilah tampilnya.
Untuk efek dari masing-masing tombol, silahkan dicoba.
Ada yang menghilang, tampil lagi, bahkan bisa dua-duanya.
Demikianlah share ilmu pada artikel kali ini.
Semoga bermanfaat, ya.