Home Jquery JQuery Part 4 : Mengenal Effect Dan Animasi Pada JQuery

Thursday, January 26, 2017

JQuery Part 4 : Mengenal Effect Dan Animasi Pada JQuery

Diterbitkan


MENGENAL EFFECT DAN ANIMASI PADA JQUERY
Setelah sebelumnya kita mempelajari tentang event pada JQuery sekarang kita akan lanjut membuat efek dan animasi dengan 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 :
  • 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

CARA MENGGUNAKAN DAN MEMBUAT EFEK PADA JQUERY
Membuat efek pada JQuery menurut saya tidak sesusah javascript karena syntaxnya mudah diingat dan tidak terlalu panjang. Seperti yang sudah saya jelaskan diatas fungsi efek JQuery ini adalah fungsi - fungsi javascript yang sudah dirangkum dan menghasil fungsi JQuery.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Belajar JQuery Part 4 : Mengenal Effect Pada JQuery</title>
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Effect Pada JQuery<br>
    <a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
    <button id="tombol">Tampilkan Kotak</button>
    <button id="tombol2">Sembunyikan Kotak</button>
    <div class="box">
    <h3>Saya Script Kiddies</h3>
    </div>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        $('#tombol').click(function(){
            $('.box').show();
        });

        $('#tombol2').click(function(){
            $('.box').hide();
        });
    });
</script>
</html>


style.css

body{
    font-family: raleway;
}
h1{
    text-align: center;
}
h2{
  color: white;
  text-align: center;
  padding: 20px;
}
#tombol,
#tombol2,
#tombol3{
    padding: 10px;
    background-color: transparent;
    border: 1px solid black;
    color: black;
    border-radius: 5px;
}
#tombol:hover,
#tombol2:hover,
#tombol3:hover{
    background-color: black;
    color: white;
}
.box{
    height: 500px;
    width: 700px;
    background: lightblue;
    display: none;
}
.box1{
    height: 500px;
    width: 600px;
    background: hotpink;
    display: none;
}

Kemudian jalankan pada browser lalu klik tampilkan kotak maka element box akan muncul dan klik sembunyikan kota untuk menyembunyikan element box tersebut.
$('#tombol').click(function(){
            $('.box').show();
        });

        $('#tombol2').click(function(){
            $('.box').hide();
        });
Perhatikan syntax diatas. Terdapat dua tombol yang saya beri id tombol(#tombol) dan id tombol2 (#tombol2). Kemudian saya memberikan event click pada masing - masing tombol. Kemudian tombol tersebut akan menghasilkan efek sesuai yang sudah saya atur. yaitu tombol 1 show tombol 2 hide.
$('.box').show();  --> Menampilkan
$('.box').hide(); --> Menyembunyikan

See the Pen KaerqB by Yogi Prasetyawan (@bozzgok22) on CodePen.

CARA MENGGUNAKAN EFFECT TOGGLE() JQUERY
Effect toggle() adalah efek untuk menampilkan dan menyembunyikan element. Perhatikan contoh berikut

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Tutorial Belajar Javascript Part 4 : Mengenal Effect JQuery</title>
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Effect Pada JQuery<br>
    <a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
    <button id="tombol">Tampilkan / Sembunyikan Kotak</button>
    <div class="box">
    <h2 style="color: white">Inilah salah satu kelebihan dari JQuery</h2>
    </div>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        $('#tombol').click(function(){
            $('.box').toggle();
        });
    });
</script>
</html>

style.css
body{
    font-family: raleway;
}
h1{
    text-align: center;
}
h2{
  color: white;
  text-align: center;
  padding: 20px;
}
#tombol,
#tombol2,
#tombol3{
    padding: 10px;
    background-color: transparent;
    border: 1px solid black;
    color: black;
    border-radius: 5px;
}
#tombol:hover,
#tombol2:hover,
#tombol3:hover{
    background-color: black;
    color: white;
}
.box{
    height: 500px;
    width: 700px;
    background: lightblue;
    display: none;
}
.box1{
    height: 500px;
    width: 600px;
    background: hotpink;
    display: none;
}

See the Pen EZRORx by Yogi Prasetyawan (@bozzgok22) on CodePen.


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>Tutorial Belajar Javascript Part 4 : Mengenal Effect JQuery</title>
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Effect Pada JQuery<br>
    <a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
    <button id="tombol">Tampilkan Kotak (SlideDown)</button>
    <button id="tombol2">Sembunyikan Kotak (SlideUp)</button>
    <button id="tombol3">Effect Slide Toogle Kotak (slidetoggle)</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>

</html>
</body>

style.css

body{
    font-family: raleway;
}
h1{
    text-align: center;
}
h2{
  color: white;
  text-align: center;
  padding: 20px;
}
#tombol,
#tombol2,
#tombol3{
    padding: 10px;
    background-color: transparent;
    border: 1px solid black;
    color: black;
    border-radius: 5px;
}
#tombol:hover,
#tombol2:hover,
#tombol3:hover{
    background-color: black;
    color: white;
}
.box{
    height: 500px;
    width: 700px;
    background: lightblue;
    display: none;
}
.box1{
    height: 500px;
    width: 600px;
    background: hotpink;
    display: none;
}

See the Pen rjKQqX by Yogi Prasetyawan (@bozzgok22) on CodePen.

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>
<html>
<head>
    <title>Tutorial Belajar Javascript Part 4 : Mengenal Effect JQuery</title>
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Effect Pada JQuery<br>
    <a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
    <button id="tombol">Tampilkan Kotak (fadeIn)</button>
    <button id="tombol2">Sembunyikan Kotak (fadeOut)</button>
    <button id="tombol3">Effect Slide Toogle Kotak (fadeToggle)</button>
    <div class="box">
       <h2>JQUERY ANIMATION BEIBEH</h2>
    </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>

style.css

body{
    font-family: raleway;
}
h1{
    text-align: center;
}
h2{
  color: white;
  text-align: center;
  padding: 20px;
}
#tombol,
#tombol2,
#tombol3{
    padding: 10px;
    background-color: transparent;
    border: 1px solid black;
    color: black;
    border-radius: 5px;
}
#tombol:hover,
#tombol2:hover,
#tombol3:hover{
    background-color: black;
    color: white;
}
.box{
    height: 500px;
    width: 700px;
    background: lightblue;
    display: none;
}
.box1{
    height: 500px;
    width: 600px;
    background: hotpink;
    display: none;
}

See the Pen KaebpL by Yogi Prasetyawan (@bozzgok22) on CodePen.

Saya memberikan efek fade dan juga memberikan durasi dari efek tersebut.
$('.box').fadeIn('slow'); --> Efek fadeIn dengan durasi efek lambat
$('.box').fadeOut('fast'); --> Efek fadeOut dengan durasi efek cepat
$('.box').fadeToggle(1000); --> Efek fadeToggle dengan durasi 1 detik
MEMBUAT ANIMASI SEDERHANA DENGAN JQUERY
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>Belajar JQuery Part 5 : Membuat Animasi</title>
    <script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
<script> 
$(document).ready(function(){
    $('#tombol').click(function(){
        $('div').animate({left: '150px'})
    });
});
</script> 
</head>
<body> 
<h1>Membuat Animate Pada JQuery<br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>

<button id="tombol">Start Animation</button>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

style.css

body{
    font-family: raleway;
}
h1{
    text-align: center;
}
h2{
  color: white;
  text-align: center;
  padding: 20px;
}
#tombol{
    padding: 10px;
    background-color: transparent;
    border: 1px solid black;
    color: black;
    border-radius: 5px;
}
#tombol:hover{
    background-color: black;
    color: white;
}
div{
background:#98bf21;
height:100px;
width:100px;
position:absolute;

See the Pen apKQMv by Yogi Prasetyawan (@bozzgok22) on CodePen.

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

Artikel Terkait

INero

Next Post
Previous Post


EmoticonEmoticon

Subscribe to: Post Comments (Atom)