{"id":5464,"date":"2020-03-07T16:37:12","date_gmt":"2020-03-07T11:07:12","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=5464"},"modified":"2026-11-12T14:02:43","modified_gmt":"2026-11-12T08:32:43","slug":"jquery-effects","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/jquery-effects\/","title":{"rendered":"jQuery Effects: hide(), toggle(), fadeIn(), fadeOut(), and fadeToggle()"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong><strong>Post Date:<\/strong><\/strong> March 7, 2020<strong><br><strong>Last Updated:<\/strong> <\/strong>November 12, 2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/api.jquery.com\/\" target=\"_blank\" rel=\"noopener\">jQuery<\/a> is a popular JavaScript library that simplifies HTML document manipulation, event handling, animations, and other web development tasks. One of its useful features is jQuery Effects, which allows developers to add interactive visual effects to HTML elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">jQuery provides several built-in effect methods that can be used to show, hide, and animate HTML elements without writing complex JavaScript code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this blog, we will explore some commonly used jQuery Effects methods, including <code>hide()<\/code>, <code>toggle()<\/code>, <code>fadeIn()<\/code>, <code>fadeOut()<\/code>, <code>fadeTo()<\/code>, and <code>fadeToggle()<\/code>, with syntax and practical examples.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. jQuery hide() Method<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>hide()<\/code> method is a built-in jQuery effect method used to hide the selected HTML elements. When this method is executed, the selected element gradually disappears if a duration is specified.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Syntax:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$(selector).hide(duration, easing, callback);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Parameters:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>duration<\/code>: Specifies how long the hiding animation takes (milliseconds).<\/li>\n\n\n\n<li><code>easing<\/code>: Specifies the speed of the animation at different points.<\/li>\n\n\n\n<li><code>callback<\/code>: A function executed after the animation completes.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"643\" height=\"470\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image.png\" alt=\"jQuery hide() method example using HTML and JavaScript code to hide a paragraph element when the user clicks a button, demonstrating jQuery hide effects.\" class=\"wp-image-13211\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image.png 643w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-300x219.png 300w\" sizes=\"(max-width: 643px) 100vw, 643px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Explanation:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When the user clicks the OK button, the <code>hide()<\/code> method hides the paragraph element with a 500-millisecond animation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before clicking the button:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-1.png\"><img decoding=\"async\" width=\"664\" height=\"223\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-1.png\" alt=\"Output of a jQuery hide() effect example displaying an OK button and a paragraph containing the text &quot;jQuery effects and method test&quot; before clicking the button.\" class=\"wp-image-13212\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-1.png 664w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-1-300x101.png 300w\" sizes=\"(max-width: 664px) 100vw, 664px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After clicking the button:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-2.png\"><img decoding=\"async\" width=\"663\" height=\"319\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-2.png\" alt=\"Output of the jQuery hide() method after clicking the OK button, showing that the paragraph text has been successfully hidden.\" class=\"wp-image-13213\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-2.png 663w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-2-300x144.png 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">2. jQuery toggle() Method<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>toggle()<\/code> method is used to switch between showing and hiding selected HTML elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If an element is visible, the <code>toggle()<\/code> method hides it. If the element is hidden, it displays it again.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Syntax:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"667\" height=\"136\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-3.png\" alt=\"jQuery toggle() method syntax showing the selector, speed, easing, and callback parameters used to switch HTML elements between visible and hidden states.\" class=\"wp-image-13214\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-3.png 667w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-3-300x61.png 300w\" sizes=\"(max-width: 667px) 100vw, 667px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"498\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-4.png\" alt=\"HTML and jQuery code example demonstrating the toggle() method, which shows or hides a paragraph with a 500-millisecond animation when the Toggle button is clicked.\" class=\"wp-image-13215\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-4.png 658w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-4-300x227.png 300w\" sizes=\"(max-width: 658px) 100vw, 658px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Explanation:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When the user clicks the Toggle button, the paragraph element switches between visible and hidden states using a 500-millisecond animation.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First click: Hides the paragraph.<\/li>\n\n\n\n<li>Second click: Displays the paragraph again.<\/li>\n\n\n\n<li>Subsequent clicks: Continues switching between the two states.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Before clicking the button:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"314\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-5.png\" alt=\"Output of the jQuery toggle() method showing the Toggle button and visible paragraph text before clicking the button.\" class=\"wp-image-13216\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-5.png 663w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-5-300x142.png 300w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After clicking the button:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-6.png\"><img loading=\"lazy\" decoding=\"async\" width=\"675\" height=\"292\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-6.png\" alt=\"Output of the jQuery toggle() method after clicking the Toggle button, showing that the paragraph text is hidden.\" class=\"wp-image-13217\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-6.png 675w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-6-300x130.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">3. jQuery Fade Effects<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">jQuery provides fade effect methods to control the visibility and opacity of HTML elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These methods are useful for creating smooth visual transitions in web applications.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The commonly used jQuery fade methods are:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Method<\/th><th>Description<\/th><\/tr><tr><td><code>fadeIn()<\/code><\/td><td>Gradually displays a hidden element.<\/td><\/tr><tr><td><code>fadeOut()<\/code><\/td><td>Gradually hides a visible element.<\/td><\/tr><tr><td><code>fadeTo()<\/code><\/td><td>Changes the opacity of an element to a specified value.<\/td><\/tr><tr><td><code>fadeToggle()<\/code><\/td><td>Switches between fadeIn() and fadeOut().<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">jQuery fadeIn() Method<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>fadeIn()<\/code> method gradually displays hidden HTML elements by increasing their opacity.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Syntax:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$(selector).fadeIn(speed, easing, callback);<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">jQuery fadeOut() Method<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>fadeOut()<\/code> method gradually hides visible HTML elements by decreasing their opacity.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Syntax:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$(selector).fadeOut(speed, easing, callback);<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">jQuery fadeTo() Method<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>fadeTo()<\/code> method changes the opacity of the selected HTML element to a specified value.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Syntax:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$(selector).fadeTo(speed, opacity, easing, callback);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The opacity value ranges from <code>0<\/code> (completely transparent) to <code>1<\/code> (fully visible).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">jQuery fadeToggle() Method<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>fadeToggle()<\/code> method switches between the <code>fadeIn()<\/code> and <code>fadeOut()<\/code> effects.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If the selected element is visible, it gradually fades out. If it is hidden, it gradually fades in.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Syntax:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$(selector).fadeToggle(speed, easing, callback);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-7.png\"><img loading=\"lazy\" decoding=\"async\" width=\"652\" height=\"542\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-7.png\" alt=\"HTML, CSS, and jQuery code example demonstrating the fadeToggle() method to show and hide a blue div element with a fade animation when the Fade button is clicked.\" class=\"wp-image-13218\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-7.png 652w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-7-300x249.png 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Explanation:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this example, the <code>fadeToggle()<\/code> method is applied to the <code>mydiv<\/code> element.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When the user clicks the Fade button:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First click: The blue div gradually fades out.<\/li>\n\n\n\n<li>Second click: The blue div gradually fades in.<\/li>\n\n\n\n<li>Subsequent clicks: The visibility of the div continues to toggle.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Before clicking the button:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-8.png\"><img loading=\"lazy\" decoding=\"async\" width=\"664\" height=\"371\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-8.png\" alt=\"\" class=\"wp-image-13219\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-8.png 664w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/image-8-300x168.png 300w\" sizes=\"(max-width: 664px) 100vw, 664px\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After clicking the button<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">jQuery Effects provide a simple and effective way to create interactive and visually appealing web pages. Methods such as <code>hide()<\/code>, <code>toggle()<\/code>, <code>fadeIn()<\/code>, <code>fadeOut()<\/code>, <code>fadeTo()<\/code>, and <code>fadeToggle()<\/code> help developers control the visibility and opacity of HTML elements with minimal code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By understanding these built-in jQuery methods, developers can create smoother user interactions and improve the overall user experience of web applications.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These effects are especially useful for creating dynamic interfaces, interactive buttons, notifications, and animated content sections. Practising these methods with different HTML elements will help developers understand how jQuery animations work in real-world applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions (FAQs)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. What are jQuery Effects?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">jQuery Effects are built-in methods used to add animations and visual transitions to HTML elements. They allow developers to show, hide, fade, and animate elements easily.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. What is the difference between hide() and toggle() in jQuery?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>hide()<\/code> method hides the selected HTML element, whereas the <code>toggle()<\/code> method switches between showing and hiding the element based on its current visibility.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. What is the difference between fadeIn() and fadeOut() in jQuery?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>fadeIn()<\/code> method gradually displays a hidden element, while the <code>fadeOut()<\/code> method gradually hides a visible element by changing its opacity.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related Articles<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/how-to-use-shift-and-unshift-method-in-javascript\/\">How to use shift and unshift method in javascript<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/how-to-remove-install-oracle-java-jdk-in-ubuntu-16-0-4\/\">How to remove &amp; install oracle java [Jdk] in ubuntu 16.0.4<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Need Help with JavaScript Development?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Are you looking for professional assistance with JavaScript development, frontend optimization, web application development, or troubleshooting complex JavaScript issues?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our development team at <a href=\"https:\/\/pheonixsolutions.com\/web-development\/\"><strong>Pheonix Solutions<\/strong> <\/a>can help you build, maintain, and optimize modern web applications using reliable development practices.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Get in touch with our team <a href=\"https:\/\/pheonixsolutions.com\/contact\">here<\/a> to discuss your web development requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Post Date: March 7, 2020Last Updated: November 12, 2026 Introduction jQuery is a popular JavaScript library that simplifies HTML document [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13220,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[756,751,757,755],"class_list":["post-5464","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-architecture","tag-hide","tag-jquery","tag-show","tag-toggle","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-1q8","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/03\/jQuery-Effects-Tutorial-Banner.png","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=5464"}],"version-history":[{"count":2,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5464\/revisions"}],"predecessor-version":[{"id":13222,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5464\/revisions\/13222"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media\/13220"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=5464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=5464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=5464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}