» » » jQuery : Effects
Selasa, 05 Agustus 2014

Hai sobat blogger, pada kesempatan kali ini saya akan tetap membahas masalah jQuery, namun bab yang akan saya jelaskan yaitu tentang Effects. Yuk simak penjelasan tentang bab ini..
Effects adalah sesuatu mengenai menampilkan dan menyembunyikan suatu elemen,menggerakan elemen, dan menganimasikan elemen tersebut.

Efek fade()

Efek fade digunakan untuk menghilangkan atau menampilkan elemen secara perlahan-lahan, biasanya digunakan untuk transisi/pergantian suatu objek dengan objek yang lain, sehingga transisinya terlihat lebih halus.
Ada 3 jenis efek fade, yaitu fadeln, fadeOut, dan fadeTo. Untuk lebih jelasnya, lihat contoh sederhana pada skrip berikut :
Source Code:
<html>
    <head>
        <title>Effects Fade</title>

        <script type="text/javascript" src="jquery-2.1.1.js"></script>
        <script type="text/javascript">
            $("document").ready(function(){
                $(".fadeout").click(function(){
                    $("#kotak").fadeOut("slow");
                });
                $(".fadein").click(function(){
                    $("#kotak").fadeIn("slow");
                });
                $(".fadeto3").click(function(){
                    $("#kotak").fadeTo("slow", 0.3);
                });
            });
        </script>

        <style type="text/css">
            #kotak {
                width: 250px;
                height: 180px;
                background: yellow;
                border: 2px solid black;
            }
        </style>
    </head>
    <body>
        <div id="kotak"></div><br/>
        <button class="fadeout">Fade Out</button>
        <button class="fadein">Fade In</button>
        <button class="fadeto3">Fade To 0.3</button>
    </body>
</html>


Hasilnya :
Sekarang coba jalankan skrip diatas, maka akan tampil sebuah kotak berwarna kuning dan tiga buah tombol.

Coba klik tombol fade out, maka kotak akan menghilang.
Kemudian coba klik tombol fade in untuk menampilkan kotak kembali.
Dan terakhir coba klik tombol fade to 0.3, maka kotak akan terlihat pudar warnanya.

Efek slide()

Efek slide digunakan untuk menghilangkan atau menampilkan elemen seperti membuka/menutup sesuatu.
Ada 3 jenis Slide, yaitu SlideUp, SlideDown, dan SlideToggle. Untuk lebih jelasnya, lihat contoh pada skrip berikut :
Source Code:
<html>
    <head>
        <title>Effects Slide</title>

        <script type="text/javascript" src="jquery-2.1.1.js"></script>
        <script type="text/javascript">
            $("document").ready(function(){
                $(".flip").click(function(){
                    $(".pesan").slideToggle("slow");
                });
            });
        </script>

        <style type="text/css">
            div.pesan {
                height:120px;
                display:none;
            }
            div.pesan, p.flip{
                margin:0px;
                padding:0px;
                text-align:center;
                background:lightblue;
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <div class="pesan">
            Nama Saya :<br/>
            Lukman Adel Taufiqurahman
            <p>Selamat berkenalan :D</p>
        </div>
        <p class="flip">Show / Hide Message</p>
    </body>
</html>
Pada script di atas, kita hanya menggunakan sebuah fungsi slide, yaitu slideToggle yang berfungi menberikan efek slide apabila pada eleen belum ada efek slidenya, sedangkan menghilangkan efek slide apabila pada elemen tersebut sudah ada efek slidenya, jadi fungsi slideToggle mencakup dua buah fungsi slide lainnya, yaitu slideUp dan slideDown. Sekarang, coba jalankan skrip di atas, maka akan tampil teks "Show / Hide Message".
Coba klik pada teks tersebut, maka akan tampil pesan dengan efek slide.

Efek animate()

Efek animate digunakan untuk menggerakkan/menganimasikan suatu elemen. 
Adapun sintaksnya:
Source Code:
$(selector).animate({params},[duration],[easing],[callback])
Keterangan :
  • Params : Mendefinisikan properti dari elemen yang akan dianimasikan dan banyak properti yang bisa dianimasikan dalam waktu yang sama. 
  • Duration : Mendefinisikan berapa waktu yang digunakan untuk menjalankan animasi. Contohnya fast, slow, normal, atau bisa juga dalam bentuk milisecond (ms), Contohnya 5000 ms = 5 detik.
Untuk lebih jelasnya, lihat contoh animasi sederhana pada skrip berikut :
Source Code:
<html>
    <head>
        <script type="text/javascript" src="jquery-2.1.1.js"></script>
        <script type="text/javascript">
            $("document").ready(function(){
                $(".mulai").click(function(){
                    $("#kotak").animate({
                        left:300
                    }, "slow")
                });
            });
        </script>

        <style type="text/css">
            #kotak {
                position:relative;
                width:100px;
                height:100px;
                background:lightblue;
            }
        </style>

        <title>Effects animate()</title>
    </head>
    <body>
        <input type="submit" class="mulai" value="Start Animate"/>
        <div id="kotak"></div>
    </body>
</html>
Sekarang coba jalankan, maka akan tampil sebuah kotak berwarna biru muda dengan tombol. Jalankan diatasnya, coba klik tombol Start Animate, maka kotak akan bergerak dari kiri ke kanan.
Lihat gambar :
Kotak bergerak dari kiri ke kanan sebanyak 300px.

Kita juga bisa memanggil efek animate beberapa kali sekaligus dalam satu function. Bahkan kita bisa menggabungkan dengan efek yang lain seperti efek slide, efek fade.
Contohnya dapat dilihat pada skrip berikut :
Source Code:
<html>
    <head>
        <script type="text/javascript" src="jquery-2.1.1.js"></script>
        <script type="text/javascript">
            $("document").ready(function(){
                $(".mulai").click(function(){
                    $("#kotak").animate({
                        left:"400"
                    }, "slow").animate({
                        top:"-160",
                        height:"200",
                        width:"200"
                    }, "slow").animate({
                        left:"0",
                        height:"100",
                        width:"100"
                    }, "slow").animate({
                        top:"0"
                    }, "slow").slideUp().slideDown("slow");
                });
            });
        </script>

        <style type="text/css">
            #kotak{
                position:relative;
                width:100px;
                height:100px;
                background:lightblue;
            }
        </style>

        <title>Effects animate() Campur</title>
    </head>
    <body>
        <button class="mulai">Start Animate</button>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <div id="kotak"></div>
    </body>
</html>
Sekarang coba jalankan skrip di atas, maka akan tampil sebuah kota berwarna biru muda dengan tombol "Start Animate" diatasnya. Coba klik tombol "Start Animate", maka kota akan bergerak dari kiri ke kanan, kemudian membesar dan bergerak atas lalu ke kanan, lalu mengecil lagi ke ukuran semula dan terakhir bergerak ke bawah menuju posisi semula sambil melakukan efek slide.

Terima Kasih Sudah Membaca ! Semoga Bermanfaat Untuk Anda :D
Posted by at 07.32
Labels: ,
Next
This is the most recent post.
Previous
Posting Lama

0 comments:

Posting Komentar

Jika ada Komentar , Tulis Di Sini

Langganan: Posting Komentar (Atom)