Metode animate() dalam jQuery

animate()

Adalah sebuah metode jQuery yang digunakan untuk membuat animasi custom menggunakan property css.

Syntax:

$(‘selector’).animate({

property_css:nilai;

})

Contoh:

Saya mempunyai kode HTML seperti kode berikut ini:

<button id=”tombol”>Tekan</button>
<p>Saya sedang belajar jQuery di a2fahmi.com</p>

Keinginan:

Saya ingin agar pada saat saya klik tombol tekan maka tulisan dalam elemen <p> bisa hilang lalu ketika saya klik tombol tekan lagi maka tulisan tersebut akan terlihat kembali.

Pertanyaan:

Bagaimana cara membuat kode jQuerynya … ?

Jawaban:

Kamu bisa gunakan kode berikut ini:

<script type=”text/javascript” src=”jquery.js”></script> 

<script type=”text/javascript”>

$(function(){

$(‘#tombol’).click(function() {

$(‘p’).animate({

height:’toggle’,

})

})

})

</script>

Keterangan:

  • $(function(), Metode ini akan menjalankan semua kode dalam bloknya setelah page selesai diload.
  • $(‘#tombol’).click(function(), Kode ini akan mengeksekusi kode dalam bloknya jika elemen HTML yang mempunyai id=’tombol’ diklik dengan mouse.
  • $(‘p’).animate(), Kode ini berarti elemen <p> akan diberi efek animasi.
  • height:’toggle’, Kode ini berarti tinggi dari elemen akan ditoggle┬ádari mempunyai tinggi sampai tidak mempunyai tinggi dan sebaliknya.

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *