{"id":8027,"date":"2015-11-04T16:15:33","date_gmt":"2015-11-04T14:15:33","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=8027"},"modified":"2017-12-21T15:48:10","modified_gmt":"2017-12-21T13:48:10","slug":"jquery-fadeout-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/","title":{"rendered":"jQuery Fadeout Example"},"content":{"rendered":"<p>In this example, the aim is to explain and use the <code>.fadeOut()<\/code> jQuery method. The fadeOut() method gradually changes the opacity, for selected elements, from visible to hidden (fading effect). If you&#8217;ve used this method previously, you probably know it is just the opposite of the <code>.fadeIn()<\/code> method. It hides the matched elements by fading them to transparent.<\/p>\n<p>It comes with severeal options that we\u2019ll have a look later on this article but can also be applied as a single, no parameter method, like this: <code>.fadeIn();<\/code>. This is the right method to use when it comes to some sort of soft animation that you need, say, when leaving a content box. Let\u2019s see it in more detail:<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;qGGDqWnle19VavkM&#8217;]<\/p>\n<h2>1. Basic Application<\/h2>\n<p>To begin, first set up your HTML document and then follow the basic syntax to apply this method.<\/p>\n<h3>1.1 Basic Document Setup<\/h3>\n<p>Create a new HTML document, and add the following basic syntax in it:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;jQuery FadeOut Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;!-- HTML SECTION  --&gt;\r\n\r\n\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script src=\"jquery-1.11.3.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Notice that jQuery library is linked locally. To download it, please go <a href=\"https:\/\/jquery.com\/download\/\" target=\"_blank\">here<\/a>.<\/p>\n<h3>The Basic Syntax<\/h3>\n<p>The most basic syntax for applying the method is: <code>$(selector).fadeOut(speed,callback);<\/code><\/p>\n<p>The optional speed parameter specifies the duration of the effect. It can take the following values: &#8220;slow&#8221;, &#8220;fast&#8221;, or milliseconds. The optional callback parameter is a function to be executed after the fading completes.<\/p>\n<h3>1.2 An Initial Application<\/h3>\n<p>Let&#8217;s create a new <code>button<\/code> element and a <code>p<\/code> (paragraph). On the click of the button, the paragraph is going disappear (fadeOut).<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n\r\n&lt;button&gt;Fade Out&lt;\/button&gt;\r\n&lt;p&gt;Lorem ipsum dolor sit amet.&lt;\/p&gt;\r\n<\/pre>\n<p>In the JS section, select the button element and add the click method to capture user click and define the fadeOut method to the paragraph.<\/p>\n<pre class=\"brush:js\">\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function(){\r\n    $(\"button\").click(function(){\r\n        $(\"p\").fadeOut();\r\n    });\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>The result in the browser would be:<br \/>\n<a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/10\/fade-out-1.gif\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/10\/fade-out-1.gif\" alt=\"fade-out-1\" width=\"800\" height=\"148\" class=\"aligncenter size-full wp-image-8036\" \/><\/a><br \/>\nJust like hiding a paragraph, you can also hide a set of elements or content in the very same way.<\/p>\n<h2>2. FadeOut Options<\/h2>\n<p>Below, you can find the options that can be applied to <code>fadeOut()<\/code> and examples for the most useful ones.<\/p>\n<h3>2.1 <strong>duration<\/strong><\/h3>\n<p>Default: <strong>400<\/strong> (ms)<br \/>\nType: <code>Number<\/code> or <code>String<\/code><br \/>\nDescription: A string or number determining how long the animation will run.<\/p>\n<p>You can set a number which will represent the time in <strong>ms<\/strong>, or a word like <code>\"slow\"<\/code> or <code>\"fast\"<\/code>.<\/p>\n<pre class=\"brush:js\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function(){\r\n    $(\"button\").click(function(){\r\n        $(\"p\").fadeOut(200);\r\n        \/* $(\"p\").fadeOut(\"slow\"); *\/\r\n    });\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>The result in the browser for two cases: <code>200<\/code>ms and <code>\"slow\"<\/code> as parameters.<br \/>\n<a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/10\/fade-out-2.gif\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/10\/fade-out-2.gif\" alt=\"fade-out-2\" width=\"800\" height=\"148\" class=\"aligncenter size-full wp-image-8039\" \/><\/a><\/p>\n<h3>2.2 <strong>easing<\/strong><\/h3>\n<p>Default: <strong>swing<\/strong> (ms)<br \/>\nType: <code>String<\/code><br \/>\nDescription: A string indicating which easing function to use for the transition.<\/p>\n<pre class=\"brush:js\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function() {\r\n    $('button').click(function(){\r\n    $('p').fadeOut(\"swing\");\r\n    });\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<h3>2.3 <strong>queue<\/strong><\/h3>\n<p>Default: <strong>true<\/strong> (ms)<br \/>\nType: <code>Boolean<\/code> or <code>String<\/code><br \/>\nDescription: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.<\/p>\n<pre class=\"brush:js\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function() {\r\n    $('button').click(function(){\r\n    $('p').fadeOut({queue: true, duration: 2000});\r\n    });\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>This would queue the animation:<br \/>\n<a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/10\/fade-out-3.gif\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/10\/fade-out-3.gif\" alt=\"fade-out-3\" width=\"800\" height=\"148\" class=\"aligncenter size-full wp-image-8042\" \/><\/a><\/p>\n<h3>2.4 <strong>step<\/strong><\/h3>\n<p>Type: <code>Function<\/code><br \/>\nDescription: A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.<\/p>\n<h3>2.5 <strong>complete<\/strong><\/h3>\n<p>Type: <code>Function<\/code><br \/>\nDescription: A function that is called once the animation on an element is complete.<\/p>\n<pre class=\"brush:js\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function() {\r\n    $('button').click(function(){\r\n    $('p').fadeOut(\"slow\", function(){\r\n       alert(\"The animation is complete\");\r\n    });\r\n    });\r\n});\r\n<\/pre>\n<p>The result in the browser would be a Javascript alert after the animation has been completed.<br \/>\n<a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/10\/fade-out-4.gif\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/10\/fade-out-4.gif\" alt=\"fade-out-4\" width=\"800\" height=\"324\" class=\"aligncenter size-full wp-image-8045\" \/><\/a><\/p>\n<h3>2.6 <strong>start<\/strong><\/h3>\n<p>Type: <code>Function<\/code><br \/>\nDescription: A function to call when the animation on an element begins.<\/p>\n<h3>2.7 <strong>done<\/strong><\/h3>\n<p>Type: <code>Function<\/code><br \/>\nDescription: A function to be called when the animation on an element completes (its Promise object is resolved).<\/p>\n<h3>2.8 <strong>fail<\/strong><\/h3>\n<p>Type: <code>Function<\/code><br \/>\nDescription: A function to be called when the animation on an element fails to complete (its Promise object is rejected).<\/p>\n<h3>2.9 <strong>always<\/strong><\/h3>\n<p>Type: <code>Function<\/code><br \/>\nDescription: A function to be called when the animation on an element completes or stops without completing (its Promise object is either resolved or rejected).<\/p>\n<h2>3. Conclusion<\/h2>\n<p>The <code>.fadeOut()<\/code> method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page. For most of the cases, you\u2019ll probably need the basic method animation, which leads to a 400ms fading out your content. Furthermore, we used <code>.fadeIn()<\/code> together with <code>.click()<\/code> method but you can use it on other methods as well like <code>.hover()<\/code>, <code>.mouseover()<\/code> ect.<\/p>\n<h2>4. Download<\/h2>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/10\/jQuery-FadeOut.zip\"><strong>jQuery FadeOut<\/strong><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this example, the aim is to explain and use the .fadeOut() jQuery method. The fadeOut() method gradually changes the opacity, for selected elements, from visible to hidden (fading effect). If you&#8217;ve used this method previously, you probably know it is just the opposite of the .fadeIn() method. It hides the matched elements by fading &hellip;<\/p>\n","protected":false},"author":75,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[272],"class_list":["post-8027","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-fadeout"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery Fadeout Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, the aim is to explain and use the .fadeOut() jQuery method. The fadeOut() method gradually changes the opacity, for selected elements,\" \/>\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.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Fadeout Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, the aim is to explain and use the .fadeOut() jQuery method. The fadeOut() method gradually changes the opacity, for selected elements,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-04T14:15:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T13:48:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"jQuery Fadeout Example\",\"datePublished\":\"2015-11-04T14:15:33+00:00\",\"dateModified\":\"2017-12-21T13:48:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/\"},\"wordCount\":650,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"keywords\":[\"fadeout\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/\",\"name\":\"jQuery Fadeout Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-11-04T14:15:33+00:00\",\"dateModified\":\"2017-12-21T13:48:10+00:00\",\"description\":\"In this example, the aim is to explain and use the .fadeOut() jQuery method. The fadeOut() method gradually changes the opacity, for selected elements,\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery Fadeout Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Fadeout Example - Web Code Geeks - 2026","description":"In this example, the aim is to explain and use the .fadeOut() jQuery method. The fadeOut() method gradually changes the opacity, for selected elements,","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.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Fadeout Example - Web Code Geeks - 2026","og_description":"In this example, the aim is to explain and use the .fadeOut() jQuery method. The fadeOut() method gradually changes the opacity, for selected elements,","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-11-04T14:15:33+00:00","article_modified_time":"2017-12-21T13:48:10+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"jQuery Fadeout Example","datePublished":"2015-11-04T14:15:33+00:00","dateModified":"2017-12-21T13:48:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/"},"wordCount":650,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","keywords":["fadeout"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/","name":"jQuery Fadeout Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-11-04T14:15:33+00:00","dateModified":"2017-12-21T13:48:10+00:00","description":"In this example, the aim is to explain and use the .fadeOut() jQuery method. The fadeOut() method gradually changes the opacity, for selected elements,","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadeout-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery Fadeout Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/8027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=8027"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/8027\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=8027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=8027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=8027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}