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.
i BananaStock/BananaStock/Getty Images

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: