Cara Mengimplementasikan Animate.CSS Kedalam Hover Dengan Jquery

Pada tutorial kali ini anda akan belajar bgaimana Cara Mengimplementasikan Animate CSS Kedalam Hover Dengan Jquery.

Sebelumnya ada yang tau animate.css ?  ini adalah sebuah css package yang di buat oleh Dan eden dimana file css tersebut akan mempermudah kita dalam menggunakan fungsi css animate.  Jika tidak tau silahkan menuju link berikut :

https://daneden.github.io/animate.css/

oke sekarang saya asumsikan kalian sudah tau cara menggunakan animate.css yang tadi saya beri tahu di atas. Karena cara menggunakannya hanya cukup memberikan class yang sudah di sediakan ke dalam element yang ingin kita berikan animasi, nah sekarang pertanyaaanya kalau saya mau efek animasi itu saya gabungkan dengan HOVER gimana ?

untuk kasus seperti ini penyelsaianya sedikit berbeda karena kita harus menggunakan jquery.

silahkan salin dan pelajari code saya di bawah ini, :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover demo</title>
  <style>
  

  h1{text-align: center;margin-top:300px;cursor: default;}

  </style>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<h1>Kursor ente Arahin dimari brohh...</h1>
 
<script>
$(document).ready(function(){
    $("h1").hover(function(){
       $('h1').addClass('animated rubberBand');
        }
    );
});
</script>
 
</body>
</html>

silahkan jalankan pada browser masing-masing dan lihat hasilnya .