Membuat Efek Animasi Image Circle Dengan Animate Jquery

Hai teman-teman semuanya, balik lagi pada tutorial dumet school, pada tutorial kali ini kita lanjut pembahasan kita mengenai animate jquery, teman-teman pasti sudah banyak yang tau apa itu jquery dan berfungsi untuk apa jquery tersebut, nah pada pembahasan kali ini kita akan praktek satu studi kasus, yaitu membuat efek animasi image circle dengan animate jquery.

seperti yang kita tau jquery adalah salah satu library dari javascript yang berfungsi untuk membuat website kita lebih interaktif dengan banyaknya efek animasi didalamnya, oke untuk lebih jelasnya kita langsung saja praktekan pada satu studi kasus kali ini, pertama silahkan teman-teman buat sebuah file dan ketikan script berikut ini:

<!Doctype html>
<html>
	<head>
		<title></title>
		<style>
			button{padding:10px 20px; background:#e74c3c; border:none; cursor:pointer;}
			img{background:#2c3e50; width:200px; height: 200px; margin-top:10px;}
			a{font-family:arial; font-size: 30px; display:none;}
		</style>
	</head>
	<body>
		<button>Klik</button><br>
		<img src="js.png"><br>
		<a href="">Dumet School</a>

	
	</body>
</html>

Pertama saya menyisipkan element tombol gambar dan satu buah element a lalu saya atur ketiga element tersebut dengan css seperti diatas, setelah itu teman-teman bisa ketikan script jquery seperti berikut ini:

		<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

		<script type="text/javascript">
			$(document).ready(function(){
				$("button").click(function(){
						$("img").animate({"border-radius":"50%"},1500, function(){
							$("a").fadeIn("slow", function(){
								$("a").css("color","#e74c3c")
							})
						})
				})
			})
		</script>

saya memanggil code cdn dari liblary jquery lalu saya mengatur ketika button di klik maka image akan mengalami efek animate dengan nilai border radius, yang saya colback dengan element a mengalami efek fadein lalu a akan berubah warna teksnya,

teman-teman bisa jalankan pada browser hasilnya, oke teman-teman silahkan mencoba,

Terima kasih.