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

by Kevin Lee

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:

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