Cara Membuat Animasi Button Click Dengan jQuery

Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips dan trik seputar dunia website, pada kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Membuat Animasi Button Click Dengan jQuery dimana dalam artikel ini saya akan membuat sebuah study case sederhana yaitu membuah button click kemudian kita akan memberikan animasi pada object yang di tuju. Dalam hal ini saya mempunyai beberapa bentuk bulat dan masing – masing mempunyai warna yang berbeda, kemudian saya membuat sebuah button sesuai dengan warna. Jika saya klik pada button hijau berarti yang akan menjalankan adalah background berwarna hijau begitu juga dengan button yang lainnya dan button yang pertama kali akan kembali ke posisi awal dan melanjutkan button yang lainnya.

Baik langsung saja kita implementasikan Cara Membuat Animasi Button Click Dengan jQuery teman – teman siapkan text editornya, langkah pertama kali kita akan membuat sebuah layoutnya terlebih dahulu. Teman – teman bisa copy script html nya di bawah ini

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><strong>Cara Membuat Animasi Button Click Dengan jQuery</strong></title>
</head>
<body>
	<div class="tombol">
		<button id="hijau">hijau</button>
		<button id="kuning">kuning</button>
		<button id="merah">merah</button>
	</div>
	<div class="hijau"></div>
	<div class="kuning"></div>
	<div class="merah"></div>
	<div class="hijau"></div>
	<div class="kuning"></div>
	<div class="merah"></div>
</body>
</html>

Kemudian masukkan style css nya

*{padding: 0; margin: 0}
div{margin-right: 20px; float: left;}
.tombol{width: 100%; height: 100px}
.hijau{width: 50px; height: 50px; background: green; border-radius: 100%; display: block;}
.kuning{width: 50px; height: 50px; background: yellow; border-radius: 100%; display: block;}
.merah{width: 50px; height: 50px; background: red; border-radius: 100%; display: block;}

Lalu save dengan nama index.html dan buka pada browsernya, maka hasil sementara seperti gambar di bawah ini

Langkah selanjutnya kita akan memberikan fungsi jQuery nya untuk menjalankan animasi nya, pada kasus ini kita akan sering menggunakan fungsi .animate() pada jQuery. Oke, selanjutnya kita load terlebih dahulu library jQuery nya.

https://code.jquery.com/jquery-3.3.1.min.js

Kemudian kita tambahkan script jQuery nya

$(document).ready(function(){
	$("#hijau").click(function(){
		$(".hijau, .kuning, .merah").animate({marginTop:"0"},1000)
		$(".hijau").animate({marginTop:"300px"},1000)
	})
	$("#kuning").click(function(){
		$(".hijau, .kuning, .merah").animate({marginTop:"0"},1000)
		$(".kuning").animate({marginTop:"300px"},1000)
	})
	$("#merah").click(function(){
		$(".hijau, .kuning, .merah").animate({marginTop:"0"},1000)
		$(".merah").animate({marginTop:"300px"},1000)
	})
});

Jika sudah save dan refresh pada browsernya lalu klik pada button sesuai warna , maka animate akan berjalan sesuai warna yang di klik

Sekian pada artikel kali ini tentang Cara Membuat Animasi Button Click Dengan jQuery kita akan jumpa kembali pada artikel yang akan datang tentunya pada tips dan trik lainnya seputar dunia website. Terimakasih dan sampai jumpa.

Semoga bermanfaat.

Cara Membuat Animasi Button Click Dengan jQuery

Kategori