Effect pada JQuery

Yoo kawan-kawan Otaku-It disini mimin mau share effect-effect yang ada pada jquery yang biasanya digunakan oleh web developer untuk membuat sebuah animasi dalam webnya, berhubung mimin lagi seneng belajar web jadi sekalian dibuat tutornya :v, yuk langsung aja dicek dibawah ini:

Jquery dapat didownload disini.

show = fungsi untuk menampilkan element.
hide = fungsi untuk menyembunyikan element.
toggle = fungsi untuk menampilkan dan menyembunyikan element.
slideUp = fungsi untuk menyembunyikan element dengan slide effect.
slideDown = fungsi untuk menampilkan element dengan slide effect.
slideToggle = fungsi untuk menampilkan dan menyembunyikan element dengan slide effect.
fadeIn = fungsi untuk menampilkan element secara perlahan.
fadeOut = fungsi untuk menyembunyikan element secara perlahan.
fadeToggle = fungsi untuk menampilkan dan menyembunyikan element secara perlahan.
animate = fungsi untuk memberikan sebuah animasi kepada element.

Contoh seperti berikut:

FadeIn and FadeOut

SlideUp and SlideDown

Show and Hide

Untuk Htmlnya seperti berikut:
<!-- <div id="fade">FadeIn and FadeOut</div>
    <div id="slide">SlideUp and SlideDown</div>
    <div id="show_hide">Show and Hide</div> -->

Untuk Cssnya seperti berikut:
/*    #show_hide,#fade,#slide{
        display: inline-flex;
        text-align: center;
    }
    #show_hide{
        background-color: aqua;
        width: 200px;
        height: 200px;
    }
    #fade{
        background-color: grey;
        width: 200px;
        height: 200px;
    }
    #slide{
        background-color: greenyellow;
        width: 200px;
        height: 200px;
    }
    */

Untuk JQuerynya seperti berikut:
/*
$(document).ready(function(){
    function effect(){
        $('#show_hide').toggle();
        $('#fade').fadeToggle(2000);
        $('#slide').slideToggle(2000);
    }
    setInterval(effect, 3000);
});
*/

Jangan lupa Uncomment sebelum menggunakanya


Jika belum mengerti dapat berkomentar dibawah ini
Selamat mencoba /('-')/\('-')\ admin@zi