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 .
CARA MENGGUNAKAN EFEK SLIDE JQUERY
Untuk membuat efek slide JQuery sama dengan membuat efek toggle diatas. untuk lebih jelasnya perhatikan contoh berikut
index.html
<!DOCTYPE html>
<html>
<head>
<title>Pengenalan jQuery Dasar</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<h1> Tutorial jQuery Dasar <br></h1>
<button id="tombol">Tombol</button>
<div class="box"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$('#tombol').click(function(){
$('.box').toggle();
});
});
});
</script>
</body>
</html>
style.css
.box {
border:1px solid blue;
background-color: blue;
padding: 20px;
width: 40%;
height: 200px;
margin-top: 10px;
border-radius: 5px;
}
button{
border:1px solid blue;
padding: 10px;
border-radius: 4px;
background-color: transparent;
}
button:hover,button:focus{
border :2px solid blue;
background-color: blue;
color: white;
}
CARA MENGGUNAKAN EFEK SLIDE JQUERY
Untuk membuat efek slide JQuery sama dengan membuat efek toggle diatas. untuk lebih jelasnya perhatikan contoh berikut
index.html
CARA MENGGUNAKAN EFEK FADE() JQUERY DAN MEMBERIKAN WAKTU PADA EFEK
Seperti yang sudah saya jelaskan efek fade adalah memberikan efek untuk memudarkan element. Untuk memberikan waktu durasi pada efek fade sobat dapat memberikan lama durasi pada parameter function fade. Sobat bisa memberikan nilai slow atau fast dan juga memberikan nilai angka berupa dengan durasi detik. Perhatikan contoh berikut
index.html
Saya memberikan efek fade dan juga memberikan durasi dari efek tersebut.
Dan yang terakhir kita menggunakan function animate() . Sebenarnya banyak sekali variasi dari function ini yang akan saya jelaskan pada kesempatan berikutnya, disini akan saya jelaskan sedikit mengenai function ini.
index.html
style.css
KESIMPULAN
Itulah beberapa cara membuat efek dan animasi pada JQuery masih banyak efek dan animasi pada JQuery yang dapat sobat gunakan. Tetapi yang saya jelaskan diatas adalah yang sering orang gunakan jadi tinggal sobat oprek dan buatlah sebagus mungkin. Sekian Terima Kasih
Untuk membuat efek slide JQuery sama dengan membuat efek toggle diatas. untuk lebih jelasnya perhatikan contoh berikut
index.html
<!DOCTYPE html>style.css
<html>
<head>
<title>Pengenalan jQuery Dasar</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<h1> Tutorial jQuery Dasar <br></h1>
<button id="tombol">Tombol</button>
<button id="tombol2">Tombol</button>
<button id="tombol3">Tombol</button>
<div class="box"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
$('.box').slideDown();
});
$('#tombol2').click(function(){
$('.box').slideUp();
});
$('#tombol3').click(function(){
$('.box').slideToggle();
});
});
</script>
</body>
</html>
.box {
border:1px solid blue;
background-color: blue;
padding: 20px;
width: 40%;
height: 200px;
margin-top: 10px;
border-radius: 5px;
}
button{
border:1px solid blue;
padding: 10px;
border-radius: 4px;
background-color: transparent;
}
button:hover,button:focus{
border :2px solid blue;
background-color: blue;
color: white;
}
CARA MENGGUNAKAN EFEK FADE() JQUERY DAN MEMBERIKAN WAKTU PADA EFEK
Seperti yang sudah saya jelaskan efek fade adalah memberikan efek untuk memudarkan element. Untuk memberikan waktu durasi pada efek fade sobat dapat memberikan lama durasi pada parameter function fade. Sobat bisa memberikan nilai slow atau fast dan juga memberikan nilai angka berupa dengan durasi detik. Perhatikan contoh berikut
index.html
<!DOCTYPE html>style.css
<html>
<head>
<title>Pengenalan jQuery Dasar</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<h1> Tutorial jQuery Dasar <br></h1>
<button id="tombol">Tombol</button>
<button id="tombol2">Tombol</button>
<button id="tombol3">Tombol</button>
<div class="box"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
$('.box').fadeIn('slow');
});
$('#tombol2').click(function(){
$('.box').fadeOut('fast');
});
$('#tombol3').click(function(){
$('.box').fadeToggle(1000);
});
});
</script>
</body>
</html>
.box {
border:1px solid blue;
background-color: blue;
padding: 20px;
width: 40%;
height: 200px;
margin-top: 10px;
border-radius: 5px;
}
button{
border:1px solid blue;
padding: 10px;
border-radius: 4px;
background-color: transparent;
}
button:hover,button:focus{
border :2px solid blue;
background-color: blue;
color: white;
}
Saya memberikan efek fade dan juga memberikan durasi dari efek tersebut.
$('.box').fadeIn('slow'); --> Efek fadeIn dengan durasi efek lambatMEMBUAT ANIMASI SEDERHANA DENGAN JQUERY
$('.box').fadeOut('fast'); --> Efek fadeOut dengan durasi efek cepat
$('.box').fadeToggle(1000); --> Efek fadeToggle dengan durasi 1 detik
Dan yang terakhir kita menggunakan function animate() . Sebenarnya banyak sekali variasi dari function ini yang akan saya jelaskan pada kesempatan berikutnya, disini akan saya jelaskan sedikit mengenai function ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Pengenalan jQuery Dasar</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<h1> Tutorial jQuery Dasar <br></h1>
<button id="tombol">Tombol</button>
<div class="box" style="position:absolute"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
$('div').animate({left: '150px'})
});
});
</script>
</body>
</html>
.box {
border:1px solid blue;
background-color: blue;
padding: 20px;
width: 40%;
height: 200px;
margin-top: 10px;
border-radius: 5px;
}
button{
border:1px solid blue;
padding: 10px;
border-radius: 4px;
background-color: transparent;
}
button:hover,button:focus{
border :2px solid blue;
background-color: blue;
color: white;
}
KESIMPULAN
Itulah beberapa cara membuat efek dan animasi pada JQuery masih banyak efek dan animasi pada JQuery yang dapat sobat gunakan. Tetapi yang saya jelaskan diatas adalah yang sering orang gunakan jadi tinggal sobat oprek dan buatlah sebagus mungkin. Sekian Terima Kasih
No comments:
Post a Comment