{"id":11781,"date":"2022-08-25T08:07:39","date_gmt":"2022-08-25T08:07:39","guid":{"rendered":"https:\/\/www.webhozz.com\/blog\/?p=11781"},"modified":"2023-05-19T08:21:42","modified_gmt":"2023-05-19T08:21:42","slug":"belajar-jquery-efek-fade-dan-slide","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/","title":{"rendered":"Belajar jQuery: Efek Fade dan Slide"},"content":{"rendered":"\n

Kali ini adalah seri lanjutan dari artikel sebelumnya yang disini (https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show\/).<\/p>\n\n\n\n

Kita akan mempelajari Efek Fade dan Slide dari JQuery.<\/p>\n\n\n\n

Untuk uraian lebih jelasnya berada pada deskripsi di bawah ini.<\/p>\n\n\n\n

Efek Fade dan Slide<\/h5>\n\n\n\n

Efek Fade ini hampir sama dengan efek show dan hide pada tutorial sebelumnya yang pernah dibahas disini (https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show\/).<\/p>\n\n\n\n

Hanya aja tampilan efek fade ini lebih pelan daripada Hide dan Show.<\/p>\n\n\n\n

Berikut ini adalah metode-metode yang ada pada Fade, yaitu:
\u2013 FadeOut : menghilangkan elemen HTML
\u2013 FadeIn : menampilkan elemen HTML
\u2013 FadeToggle : menghilangkan dan menampilkan elemen HTML
\u2013 FadeTo : opacity alias tranparansi elemen HTML<\/p>\n\n\n\n

Oke, langsung aja ya.<\/p>\n\n\n

\n<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <meta http-equiv="X-UA-Compatible" content="ie=edge">\n    <title>Efek Fade<\/title>\n    <style>\n        div\n        {\n            width: 100px;\n            height: 100px;\n            background-color: green;\n            margin-top: 20px;\n        }\n    <\/style>\n<\/head>\n<body>\n     \n    <h2>Efek Fade<\/h2>\n \n    <button class="fadeout">Fade Out<\/button>\n    <button class="fadein">Fade In<\/button>\n    <button class="fadetoggle">Fade Toggle<\/button>\n    <button class="fadeto">Fade To<\/button>\n \n    <div><\/div>\n \n    <script src="https:\/\/code.jquery.com\/jquery-3.4.1.min.js"><\/script>\n    <script>\n        $(document).ready(function () \n        {\n            $(".fadeout").click(function (e) \n            { \n               $("div").fadeOut(); \n            });\n \n            $(".fadein").click(function (e) \n            { \n               $("div").fadeIn(); \n            });\n \n            $(".fadetoggle").click(function (e) \n            { \n               $("div").fadeToggle(); \n            });\n \n            $(".fadeto").click(function (e) \n            { \n               $("div").fadeTo("slow", 0.5); \n            });\n        });\n    <\/script>    \n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
Maka, beginilah hasilnya pada browser.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
2. Lalu kita coba klik satu per satu tombol-tombol tersebut.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Dari berbagai tombol tersebut, maka kotak warna hijau pada gambar di atas akan muncul bahkan hilang.<\/p>\n\n\n\n
Itu tergantung pilihan tombol.<\/p>\n\n\n\n
Efek hilangnya lebih lembut dibandingkan dengan show hide.<\/p>\n\n\n\n
Pada gambar di atas, itu adalah efek dari tombol Fade To.<\/p>\n\n\n\n
Jika ditekan, maka kotak hijaunya jadi agak transparan.<\/p>\n\n\n\n
3. Pada masing-masing efek kecuali efek \u201c.fadeTo()\u201d.<\/p>\n\n\n\n
Bisa ditambahkan value, seperti berikut ini supaya efek hilang beserta tampilnya memiliki durasi saat efek tersebut bekerja.<\/p>\n\n\n\n
Value tersebut adalah:<\/p>\n\n\n\n
  • \u201cslow\u201d, yaitu membuat efeknya agak lambat.<\/li>
  • 2000, yaitu lama durasi. 2000 menandakan 2 detik. Artinya efeknya akan bekerja selama 2 detik. Untuk durasinya bisa ditambahkan atau dikurangi berdasarkan kebutuhan sendiri.<\/li><\/ul>\n\n\n\n
    Value tersebut bisa ditambahkan pada \u201c.nama_efeknya(value_disini)\u201d.<\/p>\n\n\n\n
    Efek Slide<\/h5>\n\n\n\n
    Efek slide adalah efek yang digunakan untuk memunculkan elemen HTML atau menghilangkan elemen HTML.<\/p>\n\n\n\n
    Kemunculan serta kehilangan yang ditampilkan pada efek ini adalah bergerak dari atas ke bawah.<\/p>\n\n\n\n
    Hampir sama kan dengan efek hide, show, serta efek fade??? Cuma yang beda adalah hasilnya.<\/p>\n\n\n\n
    Adapun metode dari efek slide ini adalah sebagai berikut.<\/p>\n\n\n\n
    • Slide Up, menghilangkan elemen HTML dari bawah ke atas.<\/li>
    • Slide Down, menampilkan elemen HTML dari atas ke bawah.<\/li>
    • Slide Toggle, menghilangkan sekaligus menampilkan layaknya Slide Up dan Slide Down.<\/li><\/ul>\n\n\n\n
      Oke, langsung aja kita coba.<\/p>\n\n\n\n
      1. Ketikkan script kode berikut.<\/li><\/ol>\n\n\n
        \n<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <meta http-equiv="X-UA-Compatible" content="ie=edge">\n    <title>Efek Slide<\/title>\n    <style>\n        div\n        {\n            width: 100px;\n            height: 100px;\n            background-color: green;\n            margin-top: 20px;\n        }\n    <\/style>\n<\/head>\n<body>\n     \n    <h2>Efek Slide<\/h2>\n \n    <button class="selaidup">Slide Up<\/button>\n    <button class="selaidown">Slide Down<\/button>\n    <button class="selaidtugel">Slide Toggle<\/button>\n     \n \n    <div><\/div>\n \n    <script src="https:\/\/code.jquery.com\/jquery-3.4.1.min.js"><\/script>\n    <script>\n        $(document).ready(function () \n        {\n            $(".selaidup").click(function (e) \n            { \n               $("div").slideUp();\n            });\n \n            $(".selaidown").click(function (e) \n            { \n               $("div").slideDown();\n            });\n \n            $(".selaidtugel").click(function (e) \n            { \n               $("div").slideToggle();\n            });\n        });\n    <\/script>    \n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
        2. Maka akan menghasilkan tampilan berikut ini.<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        3. Silahkan coba klik masing-masing tombol. Maka kotak hijau akan bereaksi berdasarkan tombol yang ditekan.<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        4. Pada masing-masing efek slide, sama seperti fade. Bisa ditambahkan value. Seperti berikut ini.<\/p>\n\n\n\n
        • \u201cslow\u201d, yaitu membuat efeknya agak lambat.<\/li>
        • 2000, yaitu lama durasi. 2000 menandakan 2 detik. Artinya efeknya akan bekerja selama 2 detik. Untuk durasinya bisa ditambahkan atau dikurangi berdasarkan kebutuhan sendiri.<\/li><\/ul>\n\n\n\n
          Value tersebut bisa ditambahkan pada \u201c.nama_efeknya(value_disini)\u201d.<\/p>\n\n\n\n
          Nah, kira-kira begitulah efek fade dan efek slide.<\/p>\n\n\n\n
          Maka dari itu, selamat mencoba dan semoga bermanfaat.<\/p>\n\n\n\n
          <\/p>\n","protected":false},"excerpt":{"rendered":"
          Kali ini adalah seri lanjutan dari artikel sebelumnya yang disini (https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show\/). Kita akan mempelajari Efek Fade dan Slide dari JQuery. Untuk uraian lebih jelasnya berada<\/p>\n","protected":false},"author":1,"featured_media":11743,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[4366,4368,4365,4367,4363,4364],"class_list":["post-11781","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-web-design","tag-belajar-jquery-efek-fade-dan-slide","tag-belajar-jquery-efek-fade-dan-slide-pemula","tag-kursus-jquery-efek-fade-dan-slide-jakarta-kursus-jquery-efek-fade-dan-slide-bandung","tag-kursus-jquery-efek-fade-dan-slide-pemula","tag-tutorial-jquery-efek-fade-dan-slide","tag-tutorial-jquery-efek-fade-dan-slide-pemula"],"yoast_head":"\nBelajar jQuery: Efek Fade dan Slide - WebHozz Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar jQuery: Efek Fade dan Slide - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Kali ini adalah seri lanjutan dari artikel sebelumnya yang disini (https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show\/). Kita akan mempelajari Efek Fade dan Slide dari JQuery. Untuk uraian lebih jelasnya berada\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-25T08:07:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-19T08:21:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-fade-dan-slide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-fade-dan-slide\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/d5f539ad171dc74baaf6a98dfef6fcef\"},\"headline\":\"Belajar jQuery: Efek Fade dan Slide\",\"datePublished\":\"2022-08-25T08:07:39+00:00\",\"dateModified\":\"2023-05-19T08:21:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-fade-dan-slide\\\/\"},\"wordCount\":411,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-fade-dan-slide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/jQuery_1.jpg\",\"keywords\":[\"Belajar jQuery Efek Fade dan Slide\",\"Belajar jQuery Efek Fade dan Slide Pemula\",\"Kursus jQuery Efek Fade dan Slide Jakarta Kursus jQuery Efek Fade dan Slide Bandung\",\"Kursus jQuery Efek Fade dan Slide Pemula\",\"Tutorial jQuery Efek Fade dan Slide\",\"Tutorial jQuery Efek Fade dan Slide Pemula\"],\"articleSection\":[\"Belajar Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-fade-dan-slide\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-fade-dan-slide\\\/\",\"name\":\"Belajar jQuery: Efek Fade dan Slide - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-fade-dan-slide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-fade-dan-slide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/jQuery_1.jpg\",\"datePublished\":\"2022-08-25T08:07:39+00:00\",\"dateModified\":\"2023-05-19T08:21:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-fade-dan-slide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-fade-dan-slide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-fade-dan-slide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/jQuery_1.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/jQuery_1.jpg\",\"width\":\"750\",\"height\":\"400\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-fade-dan-slide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Belajar jQuery: Efek Fade dan Slide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web & Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/d5f539ad171dc74baaf6a98dfef6fcef\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar jQuery: Efek Fade dan Slide - WebHozz Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/","og_locale":"en_US","og_type":"article","og_title":"Belajar jQuery: Efek Fade dan Slide - WebHozz Blog","og_description":"Kali ini adalah seri lanjutan dari artikel sebelumnya yang disini (https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show\/). Kita akan mempelajari Efek Fade dan Slide dari JQuery. Untuk uraian lebih jelasnya berada","og_url":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/","og_site_name":"WebHozz Blog","article_published_time":"2022-08-25T08:07:39+00:00","article_modified_time":"2023-05-19T08:21:42+00:00","og_image":[{"width":750,"height":400,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/d5f539ad171dc74baaf6a98dfef6fcef"},"headline":"Belajar jQuery: Efek Fade dan Slide","datePublished":"2022-08-25T08:07:39+00:00","dateModified":"2023-05-19T08:21:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/"},"wordCount":411,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","keywords":["Belajar jQuery Efek Fade dan Slide","Belajar jQuery Efek Fade dan Slide Pemula","Kursus jQuery Efek Fade dan Slide Jakarta Kursus jQuery Efek Fade dan Slide Bandung","Kursus jQuery Efek Fade dan Slide Pemula","Tutorial jQuery Efek Fade dan Slide","Tutorial jQuery Efek Fade dan Slide Pemula"],"articleSection":["Belajar Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/","url":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/","name":"Belajar jQuery: Efek Fade dan Slide - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","datePublished":"2022-08-25T08:07:39+00:00","dateModified":"2023-05-19T08:21:42+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/#primaryimage","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","width":"750","height":"400"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-fade-dan-slide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Belajar jQuery: Efek Fade dan Slide"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web & Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/d5f539ad171dc74baaf6a98dfef6fcef","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/11781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=11781"}],"version-history":[{"count":2,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/11781\/revisions"}],"predecessor-version":[{"id":12465,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/11781\/revisions\/12465"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media\/11743"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=11781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=11781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=11781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}