HTML and CSS Reference
In-Depth Information
Because the function to be applied is a fade-in effect, CSS is used to make sure the image is not ini-
tially shown through the display: none declaration:
#fadePhoto {
Now you're ready to add the JavaScript code to the script that calls the fadeIn() function of the
jQuery library. To make sure that the document is fully loaded before any code is invoked, jQuery
uses a special function, $(document).ready() . The full code for the jQuery fadeIn() function is
very short:
<script type=”text/javascript”>
Essentially, this script is saying that when the document is ready, fade in the image with the id of
#fadePhoto for a duration of 1,000 milliseconds, or 1 second. The transition is very smooth, as
shown in Figure 22-2, where the picture has faded in about 50 percent.
FiGure 22-2
Search WWH ::

Custom Search