How to Animate a DIV From Display None to Block in jQuery

by Kevin Lee
Impress site visitors by adding jQuery fade-in effects to your pages.

Impress site visitors by adding jQuery fade-in effects to your pages.

Cascading Style Sheets help site developers show, hide and animate objects on a website. If your page has a hidden DIV element, you can use JavaScript to make that DIV appear gradually by changing its display style from "none" to "block" using a timer. It takes a little programing knowledge to make that happen. Using jQuery, a cross-browser JavaScript library, you can generate this impressive fade-in effect using a single line of code.

Navigate to jQuery's website and view their jQuery code. It appears inside your browser window. Click your browser's "File" menu, and then click "Save As." The "Save As" window opens. This window displays the folders located on your hard drive.

Locate the folder that contains an HTML document you would like to use for testing. Double-click that folder to open it, and then click "Save" to save the jQuery file to that folder.

Launch an HTML editor or Notepad. Open your HTML document, and paste the following code into the document's "head" section: <script src="jquery-1.6.2.min.js" type="text/javascript" /> This statement makes the jQuery library available inside your code.

Add the following HTML code to your document's "<body>" section: <div id="MyDiv1" class="hidden"> <p>Paragraph inside div</p> </div> <input id="Button2" type="button" value="button2" onclick="return animateStyle('MyDiv1')" /> The first line of code creates a DIV. That div contains a paragraph and a button. The button, when clicked, passes the DIV's id to a JavaScript function named "animateStyle."

Place this "animateStyle" function in the document's "script" section: function animateStyle(divID) { $("#" + divID).css({ "display": "block", "opacity": "0" }).animate({ "opacity": "1" }, 3000); } This function contains a single jQuery statement. The "CSS" function, seen at the beginning of the statement, changes the DIV's display style to "block," and then sets its opacity to zero. This keeps the DIV invisible momentarily. The "animate" function animates the DIV's opacity property by changing the opacity level from zero to 100 percent. This creates the fade-in effect. The last value in the statement, 3000, is the "duration" value. It determines how long it takes for the DIV to fade in. .

Paste the CSS code shown below into the document's "head" section: <style type="text/css"> .hidden {display:none;} </style> Your DIV, created in the "body" section, references this class. This class makes the DIV invisible by setting its display value to "none."

Save this document, and open it in any browser. The DIV containing the paragraph will not appear because the CSS class, "divStyle" sets its display value to "none. Click the "Change Style" button. The jQuery code runs and changes the DIV's display style to "block." This makes the DIV containing the paragraph fade in slowly.

Tip

  • check Change the animation's duration to any value you like by changing "3000" to another number. Higher values make the animation run longer and shorter ones speed it up. You may need to experiment with those values to find one that creates the fade-in effect you desire without taking too long.

About the Author

After majoring in physics, Kevin Lee began writing professionally in 1989 when, as a software developer, he also created technical articles for the Johnson Space Center. Today this urban Texas cowboy continues to crank out high-quality software as well as non-technical articles covering a multitude of diverse topics ranging from gaming to current affairs.

Photo Credits

  • photo_camera BananaStock/BananaStock/Getty Images