Belajar JQuery Part 4 : Mengenal Effect Pada JQuery

JQueryJQuery Dasar

Malas Ngoding

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.

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.

 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.

Cara Menggunakan Effect Fade JQuery

index.html

style.css

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

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.

Sekian tutorial belajar jquery mengenal effect pada jquery.

 

Incoming search terms:

  • fungsi toggle jquery
  • apa itu toggle dalam desain web
  • belajar fadein jquery
  • belajar jquery part 4
  • belajar slide down dan toggle di jquery
  • cara menampilkantoglle
  • cara menyembunyikan toogle



Write a Comment

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