Contoh Penggunaan Effects Dengan JQuery

Selamat pagi,

Awal pekan ini yang di hiasi mendung membuat saya serasa ingin nyantai. Yah, supaya pikiran kita ikut adem layaknya suasana pagi ini. Tapi jangan sampai lupa belajarnya.

Untuk kalian yang lagi belajar khususnya JQuery, kali ini saya akan bagikan sedikit artikel bertajuk contoh penggunaan Effect dengan JQuery. Setelah di pelajari ternyata mudah banget menggunakan effects pada JQuery dan yang pasti hasilnya sob powerfull banget. Loadingnya juga aman kog alias fast.

Gimana nih, apa kalian sudah tertarik untuk mempelajarinya. Jika sudah OK, mari kita lanjut ke step examplenya.

1. Hide /  Show

<script>

$(document).ready(function() {
    $('.hide').click(function(){
        $('.p1').hide();
    });
    $('.show').click(function(){
        $('.p1').show();
    });
    $('.toggle').click(function(){
        $('.p1').toggle();
    });
});

</script>

<!-- html -->

<div style="width:500px;text-align:center;border:1px solid #B1B6D6;background-color:#E2E6FE;">
<p class="p1">Ini adalah contoh penggunaan effect Show/Hide menggunakan effect JQuery, anda dapat mengembangkannya sesuai kemampuan anda. Saya hanya memberikan contoh dasarnya saja.Silakan anda klik tombol untuk mengetahui perbedaannnya.</p>
<p style="background-color:#B1B6D6;border-top:1px solid #777;"><button class="hide">Hide</button> <button class="show">Show</button> <button class="toggle">Toggle</button></p>
</div>

Live Demo : 

Ini adalah contoh penggunaan effect Show/Hide menggunakan effect JQuery, anda dapat mengembangkannya sesuai kemampuan anda. Saya hanya memberikan contoh dasarnya saja.Silakan anda klik tombol untuk mengetahui perbedaannnya.

2. Slide

<script>

$(document).ready(function() {
    $('.hide2').click(function(){
        $('.p3').fadeOut('slow')
    });
    $('.show2').click(function(){
        $('.p3').fadeIn('slow')
    });
    $('.toggle2').click(function(){
        $('.p3').fadeToggle('slow')
    });
    $('.fadeto').click(function(){
        $('.p3').fadeTo('slow',0.25)
    });
});

</script>

<!-- html -->

<div style="width:500px;text-align:center;border:1px solid #B1B6D6;background-color:#E2E6FE;">
<p class="p2">Ini adalah contoh effect Slide pada JQuery, anda dapat mencoba langsung dengan meng-klik tombol doi bawah ini silakan anda pahami.</p>
<p style="background-color:#B1B6D6;border-top:1px solid #777;">
  <button class="hide1">SlideeUp</button> <button class="show1">SlideDown</button> <button class="toggle1">SlideToggle</button></p>
</div>

Live Demo :

Ini adalah contoh effect Slide pada JQuery, anda dapat mencoba langsung dengan meng-klik tombol doi bawah ini silakan anda pahami.

3. Fade

<script>

$(document).ready(function() {
    $('.hide2').click(function(){
        $('.p3').fadeOut('slow')
    });
    $('.show2').click(function(){
        $('.p3').fadeIn('slow')
    });
    $('.toggle2').click(function(){
        $('.p3').fadeToggle('slow')
    });
    $('.fadeto').click(function(){
        $('.p3').fadeTo('slow',0.25)
    });
});

</script>

<!-- html -->

<div style="width:500px;text-align:center;border:1px solid #B1B6D6;background-color:#E2E6FE;">
<p class="p3">Ini merupakan contoh penggunaan Fade pada JQuery, sekali lagi silakan anda pelajari dan pahami bagaimana perbedaan antara yang satu dengan lainnya.</p>
<p style="background-color:#B1B6D6;border-top:1px solid #777;">
  <button class="hide2">FadeOut</button> <button class="show2">FadeIn</button> <button class="toggle2">FadeToggle</button><button class="fadeto">FadeTo</button></p>
</div>

Live Demo : 

Ini merupakan contoh penggunaan Fade pada JQuery, sekali lagi silakan anda pelajari dan pahami bagaimana perbedaan antara yang satu dengan lainnya.

4. Animate dan Stop

<script>

$(document).ready(function() {
    $('#klik').click(function(){
        var div = $('.contoh');
        div.animate({left:'250px',opacity:'0.1'},3000);
        div.animate({height:'250px',opacity:'0.3'},3000);
        div.animate({width:'250px',opacity:'0.9'},3000);
        div.animate({height:'100px',opacity:'0.3'},3000);
        div.animate({width:'100px',opacity:'1'},3000);
        div.animate({fontSize:'20px'});
    });
    $('#stop').click(function(){
        $('.contoh').stop(true);
    });
});

</script>

<!-- html -->

<button id="klik">Klik Stat</button> <button id="stop">Stop</button><br />
<div class="contoh" style="width:100px;height:100px;background-color:#E2E6FE;border:1px solid #B1B6D6;position:relative;">Animate JQuery</div>

Live Demo :
 

Animate JQuery

5. CallBack

<script>

$(document).ready(function() {
    $('.callback').click(function(){
        $(this).hide('slow',function(){
            alert('Ini adalah fungsi CallBack JQ');
        });
    });
});

</script>

<!-- html -->

<p class="callback">Fungsi CallBack : Klik kalimat ini dan Kalimat ini akan hiden!!!</p>

Live Demo :

Fungsi CallBack : Klik kalimat ini dan Kalimat ini akan hiden!!!

6. Chaining

<script>

$(document).ready(function() {
    $('.chaining').click(function(){
        $(this).css('color','#06C').slideUp(5000).slideDown(3000);
    });
});;

</script>

<!-- html -->

<p class="chaining">Fungsi Chaining : Klik Me!!!</p>

Live Demo :

Fungsi Chaining : Klik Me!!!

Tak terasa sudah panjang banget tulisan yang saya ketik. Dah ini dulu aja kalian pelajari saya yakin kalian pasti bisa, karena JQuery itu mudah kog, simple lagi. Silakan anda pahami maksud dari setiap baris code dan coba anda tuangkan dalam editor anda, pasti anda akan segera memahaminya.

Oke, terima kasih sudah mampir.
^_^