Skip to main content

Efek jQuery bagian 1

 


Setelah kemaren kita sudah membahas mengenai apa itu jQuery dan jQuery selektor. Nah sekarang kita akan melanjutkan pembahasan menhenai jQuery yaitu tentang efek-efek yang ada di jQuery part 1. Tapi sebelum lanjut, apa bila ada yang belum paham mengenai apa itu jQuery bisa langsung saja kunjungi artikel saya yang sebelumnya yang membaahas apa itu jQuery.

Pembahasan menngenai jQuery

  1. Apa itu jQuery
  2. Apa itu jQuery Selector
  3. Efek jQuery bagian 1
  4. Efek jQuery bagian 2

Efek di jQuery

Salah satu dari kemampuan jQuery adalah adanya fungsi-fungsi efek yang sudah siap untuk di pakai. Biasanya untuk membuah efek memudar di javascript, kita harus membuat sebuah kode yang cukup panjang. Tetapi jika kita menggunakan jQuery kita cukup menggunakan fungsi $(selector).fadein(). Nah mungkin itu tadi salah satu contoh efek yang ada di jquery, dibawah ini adalah contoh efek-efek yang ada di jQuery yang sudai siap untuk kita pakai.


jQuery show() Effect

Efek jQuery show() ini sangat berguna untuk menampilkan elemen-element yang tersembunyi. Untuk mengatur element yang tersembunyi melalui CSS adalah display:none (bukan visibility:hidden). Untuk sintaknya sebagai berikut

$(selector).show(speed,callback)

Keterangan :

speed : Bersifat opsional, yaitu untuk menentukan kecepatan elemen muncul dari hidden ke visible. untuk defaultnya adalah 0, nilainya bisa berupa milllisecond, slow, normal, atau juga fast.

callback : Bersifat opsional, ini merupakan sebuah fungsi yang akan dijalankan apabila effek show selesai di jalankan

 

jQuery hide() Effect

jQuery hide() effeck ini berfungsi untuk menyembunyikan elemen yang dipilih. Untuk sintaknya adalah seperti berikut ini 

$(selector).hide(speed,callback)

Untuk keterangannya sama dengan show() effect, yang membedakan adalah fungsi dari hide. Dibawah ini adalah contoh penggunaan dari sintak jQuery hide() effect

$(".tombol1").click(function(){
    $("p").hide();
   });



jQuery toggle() Effect

jQuery toggle() effect ini merupakan sebuah gabungan dari fungsi hide dan show. jadi toggle() berfungsi untuk menampilkan sesuatu yang tersembunyi dan menyembunyikan yang tampak. Untuk sintaknya adalah sebagai berikut

$(selector).toggle(speed,callback,switch)

Keterangan :

speed : Bersifat opsional, yaitu untuk menentukan kecepatan elemen muncul dari hidden ke visible. untuk defaultnya adalah 0, nilainya bisa berupa milllisecond, slow, normal, atau juga fast.

callback : Bersifat opsional, ini merupakan sebuah fungsi yang akan dijalankan apabila effek show selesai di jalankan

switch : Bersifat opsional dan mempunyai nilai boolean yaitu TRUE or FALSE. Jika parameter ini di set, parameter speed dan callback parameters tidak bisa digunakan.

 

jQuery slideup() Effect

jQuery slideup() effeck ini berfungsi untuk menyembunyikan element secara efek sliding. sintak dari jQuery slideup() ini adalah 

$(selector).slideUp(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show()


jQuery slideDown() Effect

jQuery slideDown effect berfungsi untuk menampilkan elemen yang tersembunyi secara efek sliding. untuk sintak dari JQuery slideDown ini adalah sebagai berikut 

$(selector).slideDown(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show()


jQuery slideToggle() Effect

jQuery slideToggle() effect ini merupakan sebuah gabungan dari slideDown() dan slideUp(). ini berfungsi untuk menyembunyikan elemen jika dalam keadaan visible, menampilkan elemen jika dalam keadaan hidden. untuk sintaknya adalah sebagai berikut 

$(selector).slideToggle(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show()


jQuery fadeIn() Effect

jQuery fadeIn() effect ini berfungsi untuk menampilkan elemen yang dipilih jika tersembunyi secara efek memudar. Sintak dari jQuery fadeIn() adalah sebagai berikut 

$(selector).fadeIn(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show()


jQuery fadeOut() Effect

jQuery fadeOut() effect ini berfungsi untuk menyembunyikan elemen yang dipilih secara efek memudar. Sintak dari jQuery fadeOut() adalah sebagai berikut 

$(selector).fadeOut(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show()


jQuery fadeTo() Effect

jQuery fadeTo() effect ini berfungsi untuk mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang dituntukan. Sintak dari jQuery fadeTo() adalah sebagai berikut 

$(selector).fadeTo(speed,opacity,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show(). Sedangkan untuk parameter opacity bisa bernilai 0 sampai 1


jQuery stop() Effect

jQuery stop() effect ini berfungsi untuk menghentikan animasi yang sedang berjalan. Sintak dari jQuery stop() adalah sebagai berikut 

$(selector).stop(stopAll,goToEnd)

Keterangan :

stopAll : Bersifat opsional dan bernilai boolean, menentukan apakah menghentikan semua animasi termasuk yang ngantri untuk di jalankan pada elemen yang di pilih atau tidak.

goToEnd : Bersifat opsional dan bernilai boolean, menentukan apakah animasi yang sedang jalan dikompletkan atau tidak. Parameter ini hanya bisa digunakan jika parameter stopAll di set


Nah, mungkin sampai di sini dulu mengenai pembahasan efectpada jQuery bagian pertama. nantikan artikel selamjutnya yang membahas mengenai efect-efect pada jQuery bagian 2. Bila ada yang mau di tanyakan, silahkan bisa comment di bawah ya. Sekian dari saya, TerimaKasih ...



Labels:
Location: Indonesia

Comments

Post a Comment

Artikel Populer

HTML dan CSS - Membuat Form Pendaftaran Sederhana

Nah, Pada kesempatan kali ini saya akan mencoba membuat sebuah form pendaftaran sederhana menggunakan html dan css. pada artikel-artikel sebelumnya kita sudah membahs mengenai pengertian, sejarah dll tentang html dan css. nah sekarang kita coba untuk mempraktekannya. Membuat Form Pendaftaran Sederhana Untuk membuat form nya, pertama-tama kalian buka terlebih dahulu aplikasi code editor kalian. aplikasinya bebas mau sublime text, vs code, dan masih banyak lagi yang lainnya yang penting bisa untuk membuat html dan css. nah untuk langkah langkahnya, kalian bisa ikuti seperti yang saya contohkan di bawah ini. Membuat file html Dibawah ini merupakan file html yang kita gunakan untuk membuat form, silahkan kalian bisa mengikutinya. <! DOCTYPE   html > < html   lang = "en" > < head >     < title >Form Pendaftaran</ title > </ head > < body >      < div   id = "login-box" >  ...
6 comments
Read more »

Percabangan IF Else Pada Bahasa C dan Contohnya

Assallammualaikum wr.wb Pada kesempatan kali ini kita akan belajar lagi masih seputar bahasa C yaitu Percabangan IF Else. Apa sih itu Percabangan IF Else? IF Else merupakan suatu percabangan, bisa juga di sebut pemilihan dalam program, dimana program tersebut memiliki satu atau bahkan lebih dari satu kondisi yang didalamnya ada sebuah intruksi yang dilaksanakan jika kondisi tertentu dapat terpenuhi. Dibawah ini merupakan Struktur dari IF Else if (condition) {   //Kode program yang akan dijalankan jika condition berisi nilai True (1) } else {   //Kode program yang akan dijalankan jika condition berisi nilai False (0) } Bagian condition berperan sebagai penentu dari struktur percabangan ini. Jika condition terpenuhi (menghasilkan nilai TRUE atau 1), blok kode program milik IF akan dijalankan. Jika condition tidak terpenuhi (menghasilkan nilai FALSE atau 0), blok kode program bagian ELSE-lah yang akan diproses.   Contoh Praktek IF Else - Menentukan Umur Program C #include...
2 comments
Read more »

Belajar HTML Dasar #6 - Membuat Tabel Pada HTML

Membuat Tabel Pada HTML Tabel merupakan struktur yang digunakan untuk nmenampilkan informasi dalam bentuk baris dan kolom. Pada html, untuk pembuatan tabel menggunakan tag <table> dan menggunakan tag <tr>   untuk membuat baris dan <td> untuk membuat kolom. Untuk lebih mudah dalam memahami pembuatan table pada html, berikut ini akan saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada HTML. Tag <table> merupakan tag pembuka dalam pembuatan sebuah table pada html, tanpa tag <table>   ini, penggunaan <tr> dan <td> tidak bisa digunakan dengan baik. < tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table html. <td> atau dikenak dengan tabel data merupakan tag yang digunakan untuk membuat kolom  dalam baris dan tag < th> untuk membuat tablehead atau bagian kepala pada table. Dibawah ini adalah contoh pembuatan table pada HTML berikut : <! DOCTYPE ht...
Post a Comment
Read more »

Program Menghitung Pendapatan Karyawan Perusahaan Cat

Assallammualaikum wr.wb Pada kesempatan kali ini kita akan membuat sebuah program lagi menngunakan bahasa c yaitu tentang menghitung pendapatan karyawan suatu perusahaan Cat. C ontoh persoalannya seperti dibawah ini. Suatu perusahaan cat memberikan komisi kepada para karyawannya dengan ketentuan sebagai berikut : Bila karyawannya bisa menjual cat hingga Rp. 200.000,akan diberikan uang jasa sebesar Rp. 20.000,- ditambah dengan uang komisi 10% dari pendapatan yang diperoleh hari itu. Bila karyawannya bisa menjual cat diatas Rp. 200.000,-akan diberikan uang jasa sebesar Rp. 50.000,- ditambah dengan uang komisi 15% dari pendapatan yang diperoleh hari itu. Bila karyawannya bisa menjual cat diatas Rp. 400.000,-akan diberikan uang jasa sebesar Rp. 75.000,- ditambah dengan uang komisi 15% dari pendapatan yang diperoleh hari itu. Buatl ah program if-else untuk menghitung pendapatan karyawan perusahaan tersebut? Program bahasa C #include <stdio.h> int main() {   ...
2 comments
Read more »