jQuery Background Animate Color
Bagaimana membuat jQuery Background Animate Color.
Merasa bosan ga seh dengan kemampuan CSS 2 untuk fitur hover color yang kurang smooth? Kalo yang kurang paham maksud saya ini contoh hover dengan CSS. Jadi ketika box di hover (tempatkan cursor diatas box) warnanya dari hitam menjadi biru.
Kurang smooth ya? Bagaimana kalo seperti yg dibawah?
Lebih bagus bukan?
Untuk hover yang smooth seperti contoh ke dua menggunakan jQuery UI.
Penggunaannya adalah sebagai berikut :
1. Include jQuery Library pada head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
2. Include jQuery Background Animate Color pada head
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
3. Buat CSS untuk box
<!-- CSS Box -->
.jQbox {width:150px; height:150px; background-color:#000; margin:20px 0;}
4. Buat HTML untuk Box
<!-- div box --> <div class="jQbox"> </div>
5. Include script hover pada head atau pada halaman spesifik yang anda inginkan.
<!-- script hover -->
<script type="text/javascript">
$(document).ready(function(){
$('.jQbox').hover( //.jQbox adalah nama class box. Ganti dengan nama id atau class anda
function(){
$(this).animate({backgroundColor: '#06F'});
},
function(){
$(this).animate({backgroundColor: '#000'});
}
);
});
</script>
Pada pengaplikasiannya ada banyak metode dan jquery selain jQuery UI untuk membuat animate background seperti diatas.
Jika menggunakan CSS3 maka hanya memerlukan ‘transition’ saja tanpa jQuery.
Semoga membantu 😀
