jQuery cara mengunakan fungsi animate

jQuery cara mengunakan fungsi animate
Di Posting Oleh : Wandi febriandi
Kategori : Pelajaran Pemprograman web

Selamat datang kawan kawan di blog saya yang sederhana ini . Sebelumnya saya mau tanya bagaimana kabarya kawan ? mudah mudahan sehat , amin . Di artikel sebelumnya saya telah berbagi megenai belajar excel , fungsi sum, average, max, min, count, dan countif . Di artikel sebelumnya juga saya telah berbagi mengenai Belajar packet tracer , menghubungkan jaringan satu dengan jaringan yang lainnya , mau tau menggunakan apa dan bagaimana caranya ? baca .

Oke lanjut sekarang saya akan berbagi megenai cara menggunakan fungsi animate yang ada di jQuery , caranya bagaimana langsung aja ke contohnya .

<style>
#kotak{
background-color:#fbbd04;
width:50%;height:100px;
text-align:center;
position:relative;
}
</style>
<script language="javascript"src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
<!--
$(function(){
$('#tombol').click(function(){
$('#kotak').animate({width:'80%',height:'50%'},3000);
});
});
// -->
</script>
<p id="tombol">Klik ini</p>
<div id="kotak"><h1>Catatanwandicager.blogpost.com</h1><tt>cie promosi</tt></div>

Oke jadi begitu kita klik " klik ini " maka akan melebar sebesar 80% dan tingginya jadi 50% . Bro hanya bisa itu atau yang lain juga bisa ? ya tidaklah saya kasih contoh lagi .

tambahkan ini pada bagian javascript .

$('#tombol2').click(function(){

$('#kotak').animate({left:'20%',top:'20%'},3000);

});

tambahkan ini pada bagian HTML

<p id="tombol2">pindah posisi</p>

bisakan kan yang lain jadi begitu kita klik " pindah posisi akan berpindah " .

Oke sekarang kita akan menggunakan fungsi stop , ya jadi kalian dari namanya saja sudah tau stop berarti berhenti , tapi kalo cara menggunakannya gimana coba ? oke semoga belum tau . Kalo belum tau kita lanjut dan kalo kalian sudah tau lanjut juga agar makin tau , oke langsung saja tambahkan ini pada bagian javascriptnya .

$('#tombol3').click(function(){

$('#kotak').stop(true,false);

});

dan tambahkan ini pada bagian HTML

<p id="tombol3">berhenti</p>

Jadi untuk menghentikan animasi menggunakan fungsi stop dan ada dua parameter yaitu true dan false . Oke mungkin itu dia bagaimana cara menggunakan fungsi animate yang ada di jQuery dan juga fungsi stop . Semoga kawan kawan paham dan juga artikelnya bermanfaat . Terimakasih telah berkenan membaca artikel ini . Sampai jumpa di artikel yang lainnya yang lebih menarik dan juga lebih bermanfaat .

Silahkan kunjungi blog terbaru saya disini