belajar jquery mengenal effect pada jquery

Belajar JQuery Part 4 : Mengenal Effect Pada JQuery


Belajar JQuery Mengenal Effect Pada JQuery

Setelah pada tutorial sebelumnya anda telah mempelajari tentang pengenalan event pada jquery. klik di sini untuk membaca tutorial sebelumnya tentang pengenalan event pada jquery di www.malasngoding.com. pada tutorial belajar jquery mengenal effect pada jquery ini akan di jelaskan tentang pengenalan effect pada jquery. fungsi effect pada jquery merupakan fungsi-fungsi javascript yang sudah di rangkum menjadi fungsi jquery untuk memudahkan dalam penggunaanya.

penggunaan fungsi effect pada jquery sangat mudah di gunakan karena memliki syntax yang pendek dan mudah di mengerti. berikut adalah beberapa effect jquery:

  • hide()
    function effect jquery untuk menyembunyikan element.
  • show()
    function effect jquery untuk menampilkan element.
  • toggle()
    function effect jquery untuk menampilkan dan menyembunyikan element.
  • fadeIn()
    function effect jquery untuk menampilkan element dengan effect memudar.
  • fadeOut()
    function effect jquery untuk menyembunyikan element dengan effect memudar.
  • fadeToggle()
    function effect jquery untuk menampilkan dan menyembunyikan element dengan effect memudar.
  • slideDown()
    function effect jquery untuk menampilkan element dengan effect slide.
  • slideUp()
    function effect jquery untuk menyembunyikan element dengan effect slide.
  • slideToggle()
    function effect jquery untuk menampilkan dan menyembunyikan element dengan effect slide.
  • animate()
    function effect jquery untuk membuat effect animasi pada element.

dari penjelasan di atas pasti anda sudah mengetahui apa-apa saja function effect pada jquery. masing-masing function effect jquery tersebut sudah memiliki fungsi atau kegunaannya masing-masing. perhatikan contoh berikut ini untuk melihat cara penulisan dan penggunaan effect pada jquery.

Cara menggunakan dan membuat effect pada jquery

cara membuat effect dengan jquery sangat lah mudah karena jquery sudah merangkum fungsi-fungs effect kedalam beberapa fungsi effect yang bisa tinggal di gunakan seperti yang sudah di jelaskan di atas.

index.html

style.css

kemudian jalankan pada browser dan klik pada tombol tampilkan kotak untuk menampilkan element box, dan klik pada tombol sembunyikan kotak untuk menyembunyikan kotak.

pada contoh di atas tadi perhatikan untuk pemahaman tentang cara penulisan atau penggunaan effect jquery. terdapat dua buah tombol yang kita beri tanda dengan id tombol(#tombol) dan id tombol2 (#tombol2). kemudian memberikan event nya dengan event click. baca di sini untuk tutorial event jquery. kemudian saat element tombol di klik maka kita memberikan effect pada element yang kita inginkan.

effect di atas berarti menampilkan element box. dan

effect di atas berarti untuk menyembunyikan element box.

belajar jquery mengenal effect pada jquery

belajar jquery mengenal effect pada jquery

See the Pen bEgrmW by Malas Ngoding (@malasngoding) on CodePen.0

Cara menggunakan effect toggle() pada jquery

Effect toggle() adalah effect jquery untuk menampilkan dan menyembunyikan element

index.html

style.css

See the Pen VePzVw by Malas Ngoding (@malasngoding) on CodePen.0

 Cara Menggunakan Effect Slide Pada JQuery

untuk membuat effect slide dengan jquery caranya sangat mudah. sama seperti cara memuat effect hide, show dan toggle, anda hanya perlu mengubah function effect nya saja seperti contoh membuat effect slide pada jquery berikut ini. Belajar JQuery Mengenal Effect Pada JQuery

style.css

dan perhatikan contoh berikut untuk melihat hasil effect slide pada JQuery

See the Pen XXpaoy by Malas Ngoding (@malasngoding) on CodePen.0

Cara Menggunakan Effect Fade JQuery

index.html

style.css

See the Pen BjpdMW by Malas Ngoding (@malasngoding) on CodePen.0

Memberikan waktu durasi pada effect fade

Cara memberikan waktu durasi pada effect fade anda bisa memasukkan nilai durasi pada parameter function effet fade . anda bisa memberikan nilai slow atau fast pada parameter function fade.

atau

atau bisa juga memberikan nilai berupa angka untuk durasi waktu effect.

perhatikan contoh memberi waktu durasi pada effect fade.

index.html

style.css

See the Pen wMgqZd by Malas Ngoding (@malasngoding) on CodePen.0

Sekian tutorial belajar jquery mengenal effect pada jquery.

 

Incoming search terms:

  • apa itu toggle dalam desain web
  • belajar fadein jquery
  • cara menampilkantoglle
  • cara menyembunyikan togle
  • fungsi toggle




About the author
Diki Alfarabi Hadi

Bos in www.malasngoding.com. Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • 2 Comments
  • […] sedikit tambahan lagi yang harus di perhatikan. kita bisa memberikan efek pada saat pesan alert di tutup. yaitu dengan menambahkan class “fade in” pada element div. efek fade merupakan efek fade in merupakan efek menutup pesan alert dengan efek memudar. […]


  • […] di sini kita berikan event pada id nama. jika terjadi pengetikan pada form nama, maka form alamat akan di tampilkan dengan effect slidedown(). baca tentang tutorial effect pada jquery. […]



Write a Comment

Your email address will not be published. Required fields are marked *