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.
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.” 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. . Your DIV, created in the “body” section, references this class. This class makes the DIV invisible by setting its display value to “none.” Tips Writer Bio
