JQuery Part 3 : Mengenal Effect Dan Animasi ~ JUON JUNIOR

Monday, January 22, 2018

A.PENDAHULUAN

Hallo Teman..!! Apa kabar?? Bertemulagi dengan blog saya kali ini saya akan berbagi tentang kegiatan prakerin di blc telkom klaten.

B.PENGERTIAN

Salah satu kemampuan jquery adalah, adanya fungsi-fungsi efek yang siap pakai. Biasanya untuk membuat efek memudar di javascript, kita harus membuat kode yang lumayan panjang. Tapi dengan menggunakan jquery cukup menggunakan fungsi $(selector).fadeIn()

C.LATAR BELAKANG

ingin memahami dan mengiplementasikan jquery ke web

D.MAKSUD DAN TUJUAN

agar dapat membuat web yg bagus dengan di tambahi JQUERY

E.ALAT DAN BAHAN

laptop/pc
koneksi internet

F.WAKTU YANG DIPERLUKAN

G.PEMBAHASAN

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

Dari penjelasan diatas sobat sudah mengetahui apa saja function effect pada JQuery. Function tersebut memiliki fungsi nya masing - masing. Sekarang kita akan mengimplementasikanya satu per satu. Perhatikan contoh dibawah.

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 3 : Mengenal Effect Pada JQuery</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <h1>Effect Pada JQuery<br>
    <a href="juonj12.blogspot.co.id">juon junior</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 .

H.HASIL YANG DIDAPAT

dapat memahami tentang jquery

I.PENUTUP

sekian yang dapat saya sampaikan semoga bermanfaat..!!

J.REFERENSI

JQuery Part 3 : Mengenal Effect Dan Animasi

Kategori