{"id":7279,"date":"2015-10-05T12:15:18","date_gmt":"2015-10-05T09:15:18","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=7279"},"modified":"2017-12-21T16:11:21","modified_gmt":"2017-12-21T14:11:21","slug":"jquery-fadein-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-fadein-example\/","title":{"rendered":"jQuery FadeIn Example"},"content":{"rendered":"

The aim of this example is to introduce and give examples on the usage of .fadeIn()<\/code> method of jQuery. Basically, the fadeIn() method gradually changes the opacity, for selected elements, from hidden to visible.<\/p>\n

Hidden elements will not be displayed at all (no longer affects the layout of the page). This method is often used alongside with .fadeOut()<\/code> method which does the opposite.<\/p>\n

FadeIn is often used over content that is to be shown on mouseover or when clicked. This way, it gives a more smooth and nice look to where it is applied.<\/p>\n

It comes with severeal options that we’ll have a look later on this article but can also be applied as a single, no parameter method, like this: .fadeIn();<\/code>. Let’s see it in more detail:
\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

1. Basic Application<\/h2>\n

To begin, first set up your HTML document and then follow the basic syntax to apply this method.<\/p>\n

1.1 Document Setup<\/h3>\n

Create a new HTML document, and add the following basic syntax in it:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>jQuery FadeIn Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION  -->\r\n\r\n<!-- HTML SECTION  -->\r\n\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script src=\"jquery-1.11.3.min.js\"><\/script>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
1.2 An Initial Application<\/h3>\n
Let’s first create a button so that when when clicked, it will fadeIn same paragraph.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n\r\n<button>Fade In<\/button>\r\n<p style=\"display:none\">I just showed up because of FadeIn method!<\/p>\r\n<\/pre>\n
Notice the paragraph has a style applied to it. It is display: none;<\/code>, which means that this element will not show up when the page is opened, but it will be triggered on button click via the .click()<\/code> method. So now, in jQuery, select the button<\/code> element and define that you want the paragraph to fadeIn when the button is clciked, just like below:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n\r\n<script type=\"text\/javascript\">\r\n$(document).ready(function(){\r\n    $('button').click(function(){\r\n      $('p').fadeIn();\r\n    });\r\n});\r\n<\/script>\r\n<\/pre>\n
The result you’d get in the browser would be:
\n