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

Written by kevin lee
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Animate a DIV From Display None to Block in jQuery
Impress site visitors by adding jQuery fade-in effects to your pages. (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 programming 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.

Skill level:


  1. 1

    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.

  2. 2

    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.

  3. 3

    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.

  4. 4

    Add the following HTML code to your document's "<body>" section:

    <div id="MyDiv1" class="hidden">

    <p>Paragraph inside div</p>


    <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."

  5. 5

    Place this "animateStyle" function in the document's "script" section:

    function animate Style(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 per cent. 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.


  6. 6

    Paste the CSS code shown below into the document's "head" section:

    <style type="text/css">

    .hidden {display:none;}


    Your DIV, created in the "body" section, references this class. This class makes the DIV invisible by setting its display value to "none."

  7. 7

    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.

Tips and warnings

  • 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.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.