Belajar jQuery Part 4 : Mengenal Effect Dan Animasi
MENGENAL EFFECT DAN ANIMASI PADA JQUERY
Pada tutorial Mengenal Effect Dan Animasi Pada JQuery ini akan dijelaskan bagaimana membuat dan memahai efek pada JQuery. Fungsi efek JQuery merupakan fungsi - fungsi yang sudah dirangkum menjadi fungsi JQuery untuk mempermudah penggunanya atau si developer.
Penggunaan fungsi efek JQuery singkat dan mudah dimengerti karena memiliki syntax yang simple dan gampang diingat. Berikut adalah beberapa effect JQuery :
MENGGUNAKAN DAN MEMBUAT EFEK PADA JQUERY
Membuat efect pada jQuery menurut saya tidak sesusaj javascript karena code-codenya mudah di ingat dan tidak terlalu panjang.
Pejelasan : perhatikan syntax berikut .
terdapat 2 fungsi tombol saya beri id yang berbeda agar bisa di bedakan . id yang pertama saya kasih (#tombol) dan id kedua (#tombol2) . kemudian saya membari event click pada masing-masing tombol . tombol pertama saya kasih event untuk menampilkan kotak . tombol kedua saya kasih event untuk menyembunyikan kotak .
Pada tutorial Mengenal Effect Dan Animasi Pada JQuery ini akan dijelaskan bagaimana membuat dan memahai efek pada JQuery. Fungsi efek JQuery merupakan fungsi - fungsi yang sudah dirangkum menjadi fungsi JQuery untuk mempermudah penggunanya atau si developer.
Penggunaan fungsi efek JQuery singkat dan mudah dimengerti karena memiliki syntax yang simple dan gampang diingat. Berikut adalah beberapa effect JQuery :
- hide() : Function effect JQuery untuk menyembunyikan element
- show() : Function effect JQuery untuk menampilkan element
- toggle() : Function effect JQuery untuk menampilkan dan menyembunyikan element
- fadeIn() : Function effect JQuery untuk menampilkan element dengan efek memudar
- fadeOut() : Function effect JQuery untuk menyembunyikan element dengan efek memudar
- fadeToggle() : Function effect JQuery untuk menampilkan dan menyembunyikan element dengan efek memuda
- slideDown() : Function effect JQuery untuk menampilkan element dengan efek slide
- slideUp() : Function effect JQuery untuk menyembunyikan element dengan efek slide
- slideToggle() : Function effect JQuery untuk menampilkan dan menyembunyikan element dengan efek slide
- animate() : Function effect JQuyer untuk membuat efek animasi
MENGGUNAKAN DAN MEMBUAT EFEK PADA JQUERY
Membuat efect pada jQuery menurut saya tidak sesusaj javascript karena code-codenya mudah di ingat dan tidak terlalu panjang.
<!DOCTYPE html>
<html>
<head>
<title>Belajar JQuery Part 4 : Mengenal Effect Pada JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<h1>Effect Pada JQuery<br>
<a href="http://www.bimablctelkom.com">bimablctelkom.com</a></h1>
<button id="tombol">Tampilkan Kotak</button>
<button id="tombol2">Sembunyikan Kotak</button>
<div class="box">
<h3>Hallo !!!</h3>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
$('.box').show();
});
$('#tombol2').click(function(){
$('.box').hide();
});
});
</script>
</html>
Pejelasan : perhatikan syntax berikut .
$('#tombol').click(function(){
$('.box').show();
});
$('#tombol2').click(function(){
$('.box').hide();
});
terdapat 2 fungsi tombol saya beri id yang berbeda agar bisa di bedakan . id yang pertama saya kasih (#tombol) dan id kedua (#tombol2) . kemudian saya membari event click pada masing-masing tombol . tombol pertama saya kasih event untuk menampilkan kotak . tombol kedua saya kasih event untuk menyembunyikan kotak .
No comments