Cara Membuat Animasi Button Click Dengan jQuery
Halo Dumenity, selamat datang kembali di blog tips dan trik Source Code Aplikasi. Berjumpa kembali dengan saya di pembahasan tips dan trik seputar dunia blog, di kesempatan kali ini saya akan memberikan tips dan trik mengenai Cara Membuat Animasi Button Click Dengan jQuery dimana pada artikel ini saya akan membangun sebuah study case sederhana yaitu membuah button click kemudian kita akan memberikan animasi di object yang di tuju. Pada hal ini saya mempunyai beberapa wujud bulat dan masing – masing mempunyai warna yang berbeda, kemudian saya membangun sebuah button sesuai dengan warna. Jikalau saya klik di button hijau berarti yang akan menjalankan ialah background berwarna hijau semacam itu pun dengan button yang lainnya dan button yang pertama-tama kali akan kembali ke posisi awal dan melanjutkan button yang lainnya.
Bagus seketika saja kita implementasikan Cara Membuat Animasi Button Click Dengan jQuery teman – teman siapkan text editornya, langkah pertama-tama kali kita akan membangun sebuah layoutnya terlebih dahulu. Teman – teman dapat copy script html nya di bawah ini
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title><strong>Cara Merancang 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 di browsernya, karenanya hasil sementara seperti gambar di bawah ini
Langkah berikutnya kita akan memberikan guna jQuery nya bagi menjalankan animasi nya, di kasus ini kita akan sering menggunakan guna .animate() di jQuery. Oke, berikutnya 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)
})
});Jikalau telah save dan refresh di browsernya lalu klik di button sesuai warna , karenanya animate akan berjalan sesuai warna yang di klik
Demikianlah di artikel kali ini mengenai Cara Membuat Animasi Button Click Dengan jQuery kita akan jumpa kembali di artikel yang akan datang pastinya di tips dan trik lainnya seputar dunia blog. Terimakasih dan hingga jumpa.
Semoga bermanfaat.
Sumber https://kursuswebsite.org
