TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif

Please download to get full document.

View again

of 10
2 views
PDF
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Document Description
TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif Bagian 6. Menggunakan JQuery Effect 1 Bagian
Document Share
Document Transcript
TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif Bagian 6. Menggunakan JQuery Effect 1 Bagian 6. Menggunakan JQuery Effect Sebelumnya kita telah mempelajari JQuery Event, meskipun sudah bersinggungan dengan jquery effect yakni hide( ) tapi kita akan lebih memperdalamnya di bagian ini. JQuery effect adalah kondisi ketika suatu event terjadi, maka si penderitanya akan mendapatkan effect atau dampaknya. Misalkan jika button di klik maka paragraph akan di sembunyikan. Nah di sembunyikannya ini adalah effect. Dalam hal ini hide(). Apa saja sih yang termasuk ke dalam JQuery effect Method animate() clearqueue() delay() dequeue() fadein() fadeout() fadeto() fadetoggle() finish() hide() queue() show() slidedown() slidetoggle() 2 slideup() stop() toggle() Namun disini kita akan mempelajari yang sering digunakan saja dalam dunia web development. Yakni : animate( ), fadein( ), fadeout( ), hide( ), show( ), slidedown( ), slideup( ), slidetoggle( ), toggle( ) Menggunakan JQuery Hide dan Show Untuk contoh awal kita akan mencoba menggunakan JQuery hide dan show secara berbarengan. script type= text/javascript src= jquery min.js $( button.sembunyi ).click(function(){ $( p, #title-article,.author ).hide(); $( button.tampil ).click(function(){ $( p, #title-article,.author ).show(); em class= author oleh : Loka Dwiartara /em button class= sembunyi sembunyikan /button button class= tampil tampilkan /button 3 Hasilnya adalah jika kita mengklikkan button dengan class sembunyi, maka semua elemen yakni elemen html p, elemen html yang punya ID #title-article, dan elemen html yang punya class.author diwakili dengan selector $( p, #title-article,.author ) akan di sembunyikan, begitu sebaliknya. Anda bisa melakukan settingan kecepatan dari hide dan shownya, bisa menggunakan satuan milisecond, bisa menggunakan settingan fast, normal, dan slow. Sebagai contohnya : script type= text/javascript src= jquery min.js $( button.sembunyi ).click(function(){ $( p ).hide(500); $( #title-article ).hide( fast ); $( .author ).hide( slow ); $( button.tampil ).click(function(){ $( p ).show(2000); $( #title-article ).show( slow ); $( .author ).show( normal ); em class= author oleh : Loka Dwiartara /em button class= sembunyi sembunyikan /button button class= tampil tampilkan /button Menggunakan JQuery fadein() dan fadeout() 4 fadein untuk menampilkan elemen html secara perlahan secara fade (memudar) dan fadeout adalah sebaliknya, yakni menyembunyikan. script type= text/javascript src= jquery min.js $( button.sembunyi ).click(function(){ $( p ).fadeout(); $( #title-article ).fadeout(); $( .author ).fadeout(); $( button.tampil ).click(function(){ $( p ).fadein(); $( #title-article ).fadein(); $( .author ).fadein(); em class= author oleh : Loka Dwiartara /em button class= sembunyi sembunyikan /button button class= tampil tampilkan /button Menggunakan JQuery slideup( ) dan slidedown( ) Selain show, hide, fadein, fadeout, jquery pun menyediakan slideup dan slidedown untuk memberikan effect terhadap sebuah elemen yang terkena dampak dari event JQuery. slideup dan slidedown ini memiliki effect rolling, seperti kertas di gulung. Bagaimana menggunakannya? Contohnya adalah sebagai berikut : 5 script type= text/javascript src= jquery min.js $( button.sembunyi ).click(function(){ $( p, #title-article,.author ).slideup(); $( button.tampil ).click(function(){ $( p, #title-article,.author ).slidedown(); em class= author oleh : Loka Dwiartara /em button class= sembunyi sembunyikan /button button class= tampil tampilkan /button Menggunakan JQuery Animate Jquery Animate merupakn fitur dari jquery effect yang paling sering digunakan, terutama yang berhubungan dengan content slider, yakni membuat animasi content berjalan, geser kiri, geser kanan, dan kombinasi dari itu semua. Bagaimana menggunakan JQuery animate? Perlu diketahui Secara default semua element HTML memiliki position static, sehingga tidak bisa di geser, di pindah dan manipulasi bentuk lainnya, sehingga untuk bisa geser kanan kiri atas bawah, pindah kanan kiri atas bawah harus dirubah terlebih dahulu positionnya, menjadi relatice, fixed, maupun absolute. 6 script src= jquery min.js script $(document).ready(function(){ $( div ).animate({ height:'toggle' button mulai Animasi /button p secara default semua element HTML memiliki position static, sehingga tidak bisa di geser, di pindah dan manipulasi bentuk lainnya, sehingga untuk bisa geser kanan kiri atas bawah, pindah kanan kiri atas bawah harus dirubah terlebih dahulu positionnya, menjadi relatice, fixed, maupun absolute. /p div style= background:#0eb1ed;height:100px;width:100px;position:absolute; /div Contoh lainnya : script src= jquery min.js script $(document).ready(function(){ $( div ).animate({width:'300px',opacity:'0.8'}, slow ); $( div ).animate({height:'100px',opacity:'0.4'}, slow ); $( div ).animate({width:'100px',opacity:'0.8'}, slow ); button mulai Animasi /button 7 div style= background:#0eb1ed;height:100px;width:100px;position:absolute; /div Selain height dan width, bisa juga menggunakan left right top bottom. Sebagai contohnya kita akan menggunakan left, dan juga fontsize script src= jquery min.js script $(document).ready(function(){ $( div ).animate({left:'100px'}, slow ); $( div ).animate({fontsize:'3em'}, slow ); button mulai Animasi /button div style= background:#0eb1ed;height:100px;width:100px;position:absolute; /div Contoh Animate lainnya script src= jquery min.js script $(document).ready(function(){ $( div ).animate({ left:'250px', 8 opacity:'0.5', height:'150px', width:'150px' button mulai Animasi /button div style= background:#0eb1ed;height:100px;width:100px;position:absolute; /div Menggunakan JQuery Toggle Sebelumya kita telah menggunakan JQuery Show dan Hide secara berbarengan menggunakan 2 button. Namun bagaimana jika hanya dengan 1 button bisa melakukan effect show dan hide? Caranya adalah dengan Toggle script type= text/javascript src= jquery min.js $( p, #title-article,.author ).toggle(); 9 em class= author oleh : Loka Dwiartara /em button button Toggle /button Menggunakan JQuery slidetoggle slidetoggle mirip dengan Toggle, namun memiliki effect rolling, atau gulung, jauh lebih cantik ketimbang Toggle. Bagaimana menggunakannya. script type= text/javascript src= jquery min.js $( p, #title-article,.author ).slidetoggle(); em class= author oleh : Loka Dwiartara /em button button Toggle /button 10
Similar documents
View more...
Search Related
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks